我在 div 中有一些获取 CSS 的子元素display: none
应用于它,我想找出子元素的尺寸是多少。我怎样才能做到这一点?
小提琴演示 https://jsfiddle.net/h9b17vyk/
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)。
我无法更改顶部/左侧/右侧/底部/变换/翻译等,因为这将成为可以具有子元素的动画精灵表自定义组件的一部分。
您无法使用以下方法找到元素的尺寸display: none
但您可以打开显示屏,获取尺寸,然后将其设置回隐藏。这不会造成任何视觉差异。
var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var someHiddenDiv = document.querySelector('#some-hidden-div');
someHiddenDiv.style.display = 'block';
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
someHiddenDiv.style.display = 'none';
#some-hidden-div {
display: none;
}
.whats-my-dims {
width: 75px;
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>
请注意,在某些情况下设置display: none
返回内联样式可能会导致不必要的麻烦(因为内联样式优先于 CSS 选择器,除非它们有!important
)。在这种情况下,您可能希望完全删除样式属性本身。
在下面的代码片段中,您会看到添加了.show
类没有效果,因为内联display: none
正在优先。
var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var someHiddenDiv = document.querySelector('#some-hidden-div');
someHiddenDiv.style.display = 'block';
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
someHiddenDiv.style.display = 'none';
var btn = document.querySelector('#show');
btn.addEventListener('click', function() {
someHiddenDiv.classList.add('show');
});
#some-hidden-div {
display: none;
}
.whats-my-dims {
width: 75px;
height: 42px;
background-color: #f00;
}
#some-hidden-div.show {
display: block;
}
<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'>Some text</div>
</div>
<div class='whats-my-dims' id='whats-my-dims2'></div>
<button id='show'>Show the hidden div</button>
而在下面的代码片段中,它不会引起任何问题,因为内联样式已完全删除。
var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var someHiddenDiv = document.querySelector('#some-hidden-div');
someHiddenDiv.style.display = 'block';
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
someHiddenDiv.style = null;
var btn = document.querySelector('#show');
btn.addEventListener('click', function() {
someHiddenDiv.classList.add('show');
});
#some-hidden-div {
display: none;
}
.whats-my-dims {
width: 75px;
height: 42px;
background-color: #f00;
}
#some-hidden-div.show {
display: block;
}
<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'>Some text</div>
</div>
<div class='whats-my-dims' id='whats-my-dims2'></div>
<button id='show'>Show the hidden div</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)