隐藏元素的宽高无法通过原生js获取的问题
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获取的问题的更多相关文章
- JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...
- 如何获取设置display:none元素及子元素的宽高
由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...
- 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高
1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- jquery获取元素各种宽高及页面宽高总结
window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/mar ...
- js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
- jquery获取元素各种宽高及页面宽高
如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){ var divWidth = $("#div").width( ...
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
$(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
随机推荐
- Android用户界面 UI组件--TextView及其子类(五) DigitalClock,AnalogClock,RadioButton,CheckBox,ToggleButton汇总
DigitalClock和AnalogClock两个时钟类 可以为DigitalClock设置背景图片,自定义时针,秒针,分针的样式 例子: <?xml version="1.0&qu ...
- WebBrowser控件跨域访问页面内容
原文出处 :http://blog.csdn.net/nocky/article/details/6056802 源码出处:http://www.codecentrix.com/blog/wnd2do ...
- word在线编辑\生成图片(包含截图与合并)
1.业务原因 word编辑后的文章复制到html编辑器(fck等)会发生排版错乱的情况,于是混沌了.需要有一个新的方法来终结,于是产生了word能不能在线编辑,后台保存,前台显示灯一系列问题. 2.首 ...
- 通过 WIN32 API 实现嵌入程序窗体
写了一个不使用 COM, 而是通过 WIN32 API 实现的示例, 它把写字板程序嵌在了自己的一个面板中. 这么做可能没有实际意义, 因为两个程序之前没有进行有价值的交互, 这里仅仅是为了演示这么做 ...
- 关于启动Visual Studio 2010 旗舰版的几个错误的解决方法。
关于启动Visual Studio 2010 旗舰版的几个错误的解决方法.亲测. 重做系统之后,今天是第一次打开Visual Studio 2010 旗舰版码代码,结果遇到几个弹出的对话框,现在与大家 ...
- 【转】Android中自定义控件的步骤
原文网址:http://blog.csdn.net/lianchen/article/details/48038969 Android开发中难免遇到需要自定义控件的需求,有些是产品的要求在Androi ...
- extjs form 取值 赋值 重置
一.从form中获取field的三个方法: 1.Ext.getCmp('id'); 2.FormPanel.getForm().findField('id/name'); 3.Ext.get('id/ ...
- Selenium WebDriver + Grid2 + RSpec之旅(六) ----多浏览器的并行执行
Selenium WebDriver + Grid2 + RSpec之旅(六) ----多浏览器的并行执行 由于浏览器的发展,浏览器种类繁多.为了保证系统能在各种浏览器上叱咤风云,减少测试人员的测试工 ...
- ASPNETMVC多语言方案
ASPNETMVC多语言方案 前言: 好多年没写文章了,工作很忙,天天加班, 每天都相信不用多久,就会升职加薪,当上总经理,出任CEO,迎娶白富美,走上人生巅峰,想想还有点小激动~~~~ 直到后来发生 ...
- SLua 中使用 Lua 5.3 的编译工程
2016-03-05 更新: 之前编译的库,在 Android 下 Lua_Number 和 Lua_Integer 被编译为了32位,导致从 C# 到 Lua 过程中有64位到32位整型转换会出现溢 ...