javascript获取隐藏元素(display:none)的高度和宽度的方法(转)
2015-12-11 10:19
603 查看
类型:转载 时间:2014-06-06
这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法:
代码如下:
但是如果这个元素是隐藏(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的框架,库都已经封装了这个方法,比如jQ,我们可以直接使用 height()和width()方法获取隐藏元素的尺寸。
转:http://www.jb51.net/article/50758.htm
这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
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,大家可以看看源代码:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js获取隐藏元素的尺寸</title> <style type="text/css"> </style> <script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script> </head> <body> <div id="test_display_block" style="display:none; border:10px solid #CDCDCD; margin-left: 100px">这是test容器,可见容器<br />这是test容器,可见容器<br />这是test容器,可见容器<br />这是test容器,可见容器<br />这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br /></div> <div id="test_display_none" style="display:none; border:10px solid #CDCDCD">这是test容器,这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br />这是test容器,<br /></div> <div id="test_display_click">点我</div> <script type="text/javascript"> //判断对象类型 function getType(o){ var _t; return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase(); } //获取元素样式 function getStyle(el, styleName) { return el.style[styleName] ? el.style[styleName] : el.currentStyle ? el.currentStyle[styleName] : window.getComputedStyle(el, null)[styleName]; } function getStyleNum(el, styleName) { return parseInt(getStyle(el, styleName).replace(/px|pt|em/ig,'')); } function setStyle(el, obj){ if (getType(obj) == "object") { for (s in obj) { var cssArrt = s.split("-"); for (var i = 1; i < cssArrt.length; i++) { cssArrt[i] = cssArrt[i].replace(cssArrt[i].charAt(0), cssArrt[i].charAt(0).toUpperCase()); } var cssArrtnew = cssArrt.join(""); el.style[cssArrtnew] = obj[s]; } } else if (getType(obj) == "string") { el.style.cssText = obj; } } function getSize(el) { if (getStyle(el, "display") != "none") { return { width: el.offsetWidth || getStyleNum(el, "width"), height: el.offsetHeight || getStyleNum(el, "height") }; } var _addCss = { display: "", position: "absolute", visibility: 'hidden' }; var _oldCss = {}; for (i in _addCss) { _oldCss[i] = getStyle(el, i); } setStyle(el, _addCss); var _width = el.clientWidth || getStyleNum(el, "width"); var _height = el.clientHeight || getStyleNum(el, "height"); for (i in _oldCss) { setStyle(el, _oldCss); } return { width: _width, height: _height }; } var dd=document.getElementById("test_display_block"); alert(getSize(dd).height); document.getElementById("test_display_click").onclick=function(){ dd.style.display="block"; document.getElementById("test_display_none").style.display="block"; } alert($("#test_display_none").height()); </script> </body> </html>
题外话:一般js的框架,库都已经封装了这个方法,比如jQ,我们可以直接使用 height()和width()方法获取隐藏元素的尺寸。
转:http://www.jb51.net/article/50758.htm
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作