js获取隐藏元素(display:none)的尺寸

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

具体可以查看:https://www.html.cn/archives/625

但是如果这个元素是隐藏(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,大家可以看看源代码:https://www.html.cn/demo/getHideObjSize/getHideObjSize.html

题外话:一般js的框架,库都已经封装了这个方法,比如jQ,我们可以直接使用?height()和width()方法获取隐藏元素的尺寸。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » js获取隐藏元素(display:none)的尺寸

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    一直为这个问题所困扰,谢谢博主了。

    vapour9年前 (2010-03-26)回复
  2. #-48

    呵呵,很久以前看那本书的时候就看到这个方法了,后来就一直这么干的

    酋长9年前 (2010-03-29)回复
  3. #-47

    早些看到这篇就好了,我那个时候用margin加overflow:hidden,来解决的。还是这方法好

    jackyon9年前 (2010-04-07)回复
  4. #-46

    帮我解决了问题,谢谢

    mize7年前 (2011-12-12)回复
  5. #-45

    auto 的情况下得到的是 NaN

    zmf2年前 (2016-08-13)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏