标签：
1、起源：移动app项目中，页面加载时需要加载国家下拉列表，将隐藏的透明浮层和一个显示加载过程中的框 显示出来，隐藏的透明浮层设置宽高都是100%即可，而这个加载提示框需要先得出它的宽高，然后再根据页面的宽高计算它的绝对定位的left和top
2、用js获取该元素的宽高，结果都是0，该元素的css代码如下，因为display:none隐藏元素不占位置，所以宽高都为0，而用jQuery$("#loadImg").height()能获取到，通过网上查资料，是说jquery的这种获取方式是通过先把隐藏元素克隆一份，放置在这个元素相同的父元素里面，然后用display：block来显示元素，用绝对定位position:absolute来脱离文档流，设置top为负值，这样不会影响原先的元素，这样js获取宽高后再把它删掉。
#loadImg{width:70%; background:#000; border-radius:5px; color:#fff; line-height:35px; text-align:center; opacity:0.7; z-index:1000; display:none; border-:5px; padding:10px;}
var ew=document.getElementById("loadImg").style.offsetWidth; var eh=document.getElementById("loadImg").style.offsetHeight; // 0 0
3、方法如下,为什么放在相同的父元素下，因为css样式有些是有父元素的，如果放在body里面，宽高属性没加载上的话 ，也获取不了。
var loadImg=document.getElementById("loadImg")
getDomWidthOrHeight("width",loadImg)
getDomWidthOrHeight("height",loadImg)
// 100 200
/** * 获取隐藏元素的宽 高 * @param {Object} obj */ function getDomWidthOrHeight(widthOrHeight,obj){ //console.log(widthOrHeight+"="+obj); var clone=obj.cloneNode(true); clone.style.display="block"; clone.style.position="absolute";
clone.style.top=-10000px;
obj.parentNode.appendChild(clone); var width=clone.offsetWidth; var height=clone.offsetHeight; //console.log(width+"--"+height); obj.parentNode.removeChild(clone); return widthOrHeight=="width"?width:height; }
标签：
原文地址：http://www.cnblogs.com/webWf/p/4736672.html
