javascript获取隐藏元素(display:none)的高度和宽度的方法_javascript技巧

来源：懂视网责编：小采时间：2020-11-27 21:24:08

javascript获取隐藏元素(display:none)的高度和宽度的方法_javascript技巧

javascript获取隐藏元素(display:none)的高度和宽度的方法_javascript技巧:js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyleobj.curren

推荐度：

点击下载本文 文档为doc格式

导读javascript获取隐藏元素(display:none)的高度和宽度的方法_javascript技巧:js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyleobj.curren

js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：
代码如下:
function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}

但是如果这个元素是隐藏(display:none)的，尺寸又是未知自适应的，哪有上面的方法就不行了！因为display:none的元素是没有物理尺寸的！悲剧就这样发生了！

幸好css中还有visibility:hidden，不可见属性，他和display:none最大的区别就是visibility:hidden有物理尺寸。有物理尺寸就可以通过上面的方法获取尺寸，但是将display:none改成visibility:hidden后页面就有一块空白在那里，即使在你获取尺寸后在马上将visibility:hidden改成display:none页面那部分还是会抖动一下。那么最好的办法就是将这个隐藏的元素移出屏幕或者脱离文档流（ position: absolute）。这样似乎非常完美了，但是悲剧又发生了，如果你要再显示这个元素的时侯这个元素是不可见的，位置也不对，因为这是这个元素visibility:hidden;position: absolute。所以在获取尺寸后还要将样式还原回去。就是将position和visibility属性设回原来的样式。

这就是js获取隐藏元素的尺寸基本实现方式，大家有兴趣可以看看《精通javascript》这本书上的方法。

我这里也做了个简单的demo，大家可以看看源代码:
代码如下:

js获取隐藏元素的尺寸

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com