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()方法获取隐藏元素的尺寸。
相关推荐
-
原生JS获取元素集合的子元素宽度实例
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. HTML结构: <ul class="itemCon"> <li class="item"> <div class="leftMess"> <div class="leftCon">
-
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
如下所示: screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 一.通过浏览器获得屏幕的尺寸 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth
-
js获取Html元素的实际宽度高度的方法
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内styl
-
无法获取隐藏元素宽度和高度的解决方案
在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是display为none的元素. 可使用jQuery Actual Plugin插件来完成,其源码如下: ;( function ( $ ){ $.fn.addBack = $.fn.addBack || $.fn.andSelf; $.fn.extend({ actual : function ( method, options ){ // check if the jQuery method exist if( !this[
-
一个JavaScript获取元素当前高度的实例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-获取元素当前高度</title> <style> #date{width:90%;height:25%;padding:10px;back
-
jquery如何获取元素的滚动条高度等实现代码
主要功能: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 : $(document).width(); 浏览器当前窗口文档body的高度: $(document.body).height(); 浏览器当前窗口文档body的宽度: $(document.body).width(); 获取滚动条到顶部的
-
js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高(f
-
jQuery获取页面及个元素高度、宽度的总结——超实用
下面把jQuery获取页面及个元素高度.宽度的方法汇总,分享给大家. 获取浏览器显示区域(可视区域)的高度 : 复制代码 代码如下: $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : 复制代码 代码如下: $(window).width(); 获取页面的文档高度 复制代码 代码如下: $(document).height(); 获取页面的文档宽度 : 复制代码 代码如下: $(document).width(); 浏览器当前窗口文档body的高度: 复制代码 代码
-
javascript获取隐藏元素(display:none)的高度和宽度的方法
js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 复制代码 代码如下: function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象.样式特性 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];} 但是如果这个元素是隐藏(dis
-
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
经常发现在写JavaScript的时候,都需要用到网页.浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的
-
js获取隐藏元素的宽高
获取隐藏元素(display:none)的物理尺寸 问题及场景 假如我们有这样一个输入框,点击能展开选择.如下图: 在这里输入框和下方的展开区域是分离的,独立的两个控件!初始状态下面的可选框是隐藏的(ng-show=false) 展开区域中可折叠组件accordion(对应图中省份,排序字段,短消息部分)的高度是随着数据自适应撑开,点击accordion折叠收缩时有一个高度变化的动画效果! 在计算accordion的高度时却无法获取数据节点元素的高度,导致accordion的高度为0,无法折叠!
-
js获取隐藏元素宽高的实现方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo
-
Javascript获取页面元素的绝对位置实现
目录 一.概念 二.获取方法 三.代码 四.问题 一.概念 绝对位置:网页元素的左上角相对于整张网页左上角的坐标 相对位置:相对于浏览器窗口左上角的坐标 二.获取方法 1.每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离. 2.每个元素都有offsetParent属性.offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定
-
JavaScript获取指定元素位置的方法
本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() { var self = document.getElementById("eID"); var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft; var top = self.getBoundingClientR
-
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法.分享给大家供大家参考,具体如下: /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return 返回查找到的元素Dom对象,无则返回null */ function getNearEle(ele, type) { type = type == 1 ? "previousSibling" : "nextSi
-
vue获取DOM元素并设置属性的两种实现方法
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件
-
JS动态修改iframe高度和宽度的方法
本文实例讲述了JS动态修改iframe高度和宽度的方法.分享给大家供大家参考.具体如下: 如果希望通过按钮动态修改iframe的高度和宽度,可以参考下面的JS代码 <!DOCTYPE html> <html> <head> <script> function changeSize() { document.getElementById("myframe").height="300"; document.getEleme