隐藏元素的宽高无法通过原生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: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

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

如何获取隐藏元素的宽高

获取隐藏元素(display:none)的物理尺寸 问题及场景 假如我们有这样一个输入框,点击能展开选择.如下图: 在这里输入框和下方的展开区域是分离的,独立的两个控件!初始状态下面的可选框是隐藏的(ng-show=false) 展开区域中可折叠组件accordion(对应图中省份,排序字段,短消息部分)的高度是随着数据自适应撑开,点击accordion折叠收缩时有一个高度变化的动画效果! 在计算accordion的高度时却无法获取数据节点元素的高度,导致accordion的高度为0,无法折叠!

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

由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 代码 如何获取 id="ul" 元素的宽高??? html <section class="section none"> <div> <ul id="ul"> <li>第 <span class

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

window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding c = $("#div").outerWidth(),//outerWidth()返回元素的宽高 + padding + border d =

给内联元素设置宽高的几种方式

内联元素默认不能设宽高,其宽高由其内容自动撑开 让内联元素具有宽高属性的几种方式 1,给内联元素转换成块级元素或内联块级元素 block或inline-block 2,让内联元素脱离文档流,比如绝对定位.固定定位或浮动 span{ width:3rem; height:100%; float:left; }

块级元素和内联元素的宽高是如何确定的

在刚接触CSS的时候,每次给元素添加样式,都习惯性的写上宽是多少,高是多少,为自己挖坑无数,还暗自抱怨说CSS好烦,不过它真的是好烦,脾气很怪. 好,言归正传.在讨论元素的宽高是如何确定的之前,我们先明确一下文档流的概念:对于内联元素,是从左到右排列的,当宽度不够时换行:对于块级元素,是从上到下排列的,每一个元素都另起一行. 一.内联元素宽高的确定 宽度:不受width的限制,有文字内容决定的,padding 和 margin 可以改变宽度. 高度:不受height的限制,padding 和ma

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

如何使用jquery来获取网页里各种高度? 示例如下: 1 $(document).ready(function(){ 2 var divWidth = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin 3 divInnerWidth = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding 4 divOuterWidth = $("

如何定义一个高逼格的原生JS插件

转自:https://www.jianshu.com/p/205a4033010a 如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦.以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了.不过,也从侧面说明了原生js在前端中占着多么重要的一面.好了.废话不多说.咱们就来看一下

原生js获取元素的class属性(获取class的所有元素)以及改变或添加calssName

今天在工作中,用到了设置className,因此查阅了一下资料,总结一下. 一.如何用原生js获取class属性 1 <div class = "dom'> 2 </div> 元素JS实现方法: 1 function $class(domclass) 2 { 3 var odiv = document.getElementsByTagName("*"); 4 var aResult = []; //定义一个空数组,用来存放与目标className相同的

原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,