我在 div 中有一些子元素,它们应用了 CSS display: none
,我想找出子元素的尺寸是多少。我该怎么做?
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>
我只能使用纯 JavaScript(不能使用 jQuery)。
我无法更改顶部/左侧/右侧/底部/变换/翻译/等,因为这将成为可以包含子元素的动画 Sprite 表自定义组件的一部分。
最佳答案
使用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/
关于javascript - 你如何找到 "display: none"元素的维度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35519137/