css+js实现旋转90度后宽高互换

一、css+js实现旋转90度后宽高互换

1、通过CSS和JavaScript的巧妙结合，可以解决旋转元素后宽高保持不变导致布局混乱的问题。一个Vue组件被设计出来，接受需要旋转的DOM元素作为插槽内容，通过调整rotation属性，实现了旋转后的元素宽高同步变化，确保了布局的整洁。以下是实际操作和代码示例。

2、当元素被旋转90度时，传统的transform: rotate(90deg)不会改变元素的实际宽高，可能会导致布局问题。解决这一问题的方法是，在组件挂载时获取slot中的DOM元素的原始宽高，然后实时监听rotation值的变化以及slot内容的变化。每当这些条件满足时，组件会重新获取宽高数据，并根据旋转角度判断是否需要进行宽高互换。最后，根据计算得出的新宽高值，动态地更新外层DOM的样式，从而完美解决了宽高不变的问题。

3、你可以在以下链接体验这个功能的实战示例：

4、该解决方案已发布在公众号，首发地址如下：

5、通过这个组件，你可以在CSS+JS的世界里轻松实现元素旋转90度后宽高互换，确保布局的灵活性。

二、js 如何获取新的和旧的dom树

1、javascript获取 Dom树比较简单。直接获取document文档对象就可以了，或者也可以直接从具体的控件对象进行获取。

2、比较困难的是如何获取之前旧的dom树对象。常见的思路是可以设置一个全局的数组变量保存之前的dom树对象，注意此对象保存的只是引用，你做变更，之前保存的对象也是变的，因为两者本来就是同一个对象。所以你要保存的必须是dom树的复制对象，也就是所谓的深拷贝对象，这个是有点复杂度的，节点如果复杂的话，容易出现问题，要注意处理。