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; }
时间: 2024-10-27 17:29:06