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:; 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;
}

隐藏元素的宽高无法通过原生js获取的问题的更多相关文章

  1. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  2. 如何获取设置display:none元素及子元素的宽高

    由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...

  3. 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

    1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...

  4. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  5. jquery获取元素各种宽高及页面宽高总结

    window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/mar ...

  6. js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  7. jquery获取元素各种宽高及页面宽高

    如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){  var divWidth = $("#div").width( ...

  8. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

  9. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

随机推荐

  1. PEP Index > PEP 339 -- Design of the CPython Compiler 译文

    http://www.python.org/dev/peps/pep-0339/ PEP: 339 标题: CPython的编译器设计 版本: 425fc5598ee8 最后修改: 2011-01-1 ...

  2. PHP curl传输文件的版本兼容性

    /** * 存储文件到远程服务器 * * @param string $filePath * 文件绝对路径 * @param string $fileSaveUrl * 存储的远程目标地址 * @pa ...

  3. git fetch 拉取而不合并

    1.git fetch git fetch origin master:tmp git diff tmp git merge tmp git branch -d tmp          从远程获取最 ...

  4. Xcode5下去除Icon高光

    1:Images.xcassets中, 选中图片, 查看属性. 在“iOS icon is pre-rendered” 打勾 2:Info.plist中修改 (1):添加 Icon already i ...

  5. ZOJ --- 3516 Tree of Three

    Tree of Three Time Limit: 2 Seconds      Memory Limit: 65536 KB Now we have a tree and some queries ...

  6. 破解安装 SecureCRT 7.0.2 for mac完美破解版,mac secureCRT , apple secureCRT

    mac secureCRT , apple secureCRT 下载地址:http://download.csdn.net/detail/guolichun/7733069 破解安装  SecureC ...

  7. .net常見面試題(二)

    一.选择题 1. 下面叙述正确的是___C___. A.算法的执行效率与数据的存储结构无关 B.算法的空间复杂度是指算法程序中指令(或语句)的条数 C.算法的有穷性是指算法必须能在执行有限个步骤之后终 ...

  8. [bzoj\lydsy\大视野在线测评]题解(持续更新)

    目录: 一.DP 二.图论 1.最短路 2.强连通分量 三.利用单调性维护 四.贪心 五.数据结构 1.并查集 六.数学 1.计数问题 2.数学分析 七.博弈 八.搜索 /////////////// ...

  9. oracle10g前期准备

    上午在虚拟机安装了oracle10g,安装比较简单,只是前期工作比较多,如: 在Root用户下执行以下步骤: 1)修改用户的SHELL的限制,修改/etc/security/limits.conf文件 ...

  10. PAT 1004. Counting Leaves (30)

    A family hierarchy is usually presented by a pedigree tree.  Your job is to count those family membe ...