你如何找到“显示：无”的尺寸？元件？ [英] How do you find the dimensions of a "display: none" element?

问题描述

我在div里面有一些子元素，它将CSS display：none 应用到它，我想知道子元素的尺寸是多少。我怎样才能做到这一点？

＃some-hidden-div {display：none;}。whats-my-dims {width：69px;身高：42px; background-color：＃f00;}

< div id ='output'>正在处理...：p< / div>< div id ='some-hidden-div'> < div class ='whats-my-dims'id ='whats-my-dims1'>< / div>< / div>< div class ='whats-my-dims'id ='whats- my-dims2'>< / div>

只使用纯JavaScript（无jQuery）。

我无法更改top / left / right / bottom / transform / translate / etc，因为这将成为一个可以具有子元素的动画sprite表自定义组件。使用 window.getComputedStyle（）使用 / code>

-dims1'）; var wmd2 = document.getElementById（'whats-my-dims2'）; o.innerHTML ='wmd1：''+ window.getComputedStyle（wmd1）.getPropertyValue（width）+'，' + window.getComputedStyle（wmd1）.getPropertyValue （height）+'，wmd2：'+ window.getComputedStyle（wmd2）.getPropertyValue（width）+'，'+ window.getComputedStyle（wmd2）.getPropertyValue（height）+' ';

＃some-hidden-div {display：none ;}。whats-my-dims {display：block;宽度：69px;身高：42px; background-color：＃f00;}

< div id = '输出' >正在处理...：p< / div>< div> Sooo ...如何获得whats-my-dims1的宽度和高度< / div>< div id ='some-hidden-div'> < div class ='whats-my-dims'id ='whats-my-dims1'>< / div>< / div>< div class ='whats-my-dims'id ='whats- my-dims2'>< / div>

$ b

jsfiddle < a href =https://jsfiddle.net/h9b17vyk/3/ =noreferrer> https://jsfiddle.net/h9b17vyk/3/

I have some child elements inside a div that gets the CSS display: none applied to it and I want to find out what the child element dimensions are. How can I do this?

Fiddle Demo

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';

#some-hidden-div{
  display: none;
}
.whats-my-dims{
  width: 69px;
  height: 42px;
  background-color: #f00;
}

<div id='output'>Processing... :p</div>
<div id='some-hidden-div'>
  <div class='whats-my-dims' id='whats-my-dims1'></div>
</div>
<div class='whats-my-dims' id='whats-my-dims2'></div>

I can only use pure JavaScript (no jQuery).

I can't change top/left/right/bottom/transform/translate/etc because this is going to be part of an animated sprite sheet custom component that can have child elements.

解决方案

Use window.getComputedStyle()

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + window.getComputedStyle(wmd1).getPropertyValue("width") 
+ '", "' 
+ window.getComputedStyle(wmd1).getPropertyValue("height") 
+ '", wmd2: "' 
+ window.getComputedStyle(wmd2).getPropertyValue("width") + '", "' 
+ window.getComputedStyle(wmd2).getPropertyValue("height") + '"';

#some-hidden-div{
  display: none;
}
.whats-my-dims{
  display:block;
  width: 69px;
  height: 42px;
  background-color: #f00;
}

<div id='output'>
  Processing... :p
</div>
<div>
  Sooo... How do I get the width and height of whats-my-dims1?
</div>
<div id='some-hidden-div'>
  <div class='whats-my-dims' id='whats-my-dims1'></div>
</div>
<div class='whats-my-dims' id='whats-my-dims2'></div>

jsfiddle https://jsfiddle.net/h9b17vyk/3/

这篇关于你如何找到“显示：无”的尺寸？元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！