Javascript 您如何找到“a”的尺寸；显示：无“；元素？

我在一个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+”
#一些隐藏的div{
显示：无；
}
.我的影子是什么{
宽度：69px；
高度：42px；
背景色：#f00；
}
处理…：P
您无法使用
display:none
获取元素的尺寸，因为它是隐藏的，不占用任何空间，因此没有尺寸。这同样适用于它的孩子

您可以改为使图元在一段时间内可见，检查子标注并使图元背面不可见。正如@JanDvorak所指出的：

同步Javascript运行时，浏览器不会重新绘制，因此元素永远不会出现在屏幕上

示例代码：

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var wmd2 = document.getElementById('whats-my-dims2');
var hiddenDiv = document.getElementById("some-hidden-div");
hiddenDiv.style.display = "block";
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
hiddenDiv.style.display = "";

请参见。
您无法通过
显示找到元素的尺寸：无
，但您可以打开显示，获取尺寸，然后将其设置回隐藏状态。这不会造成任何视觉上的差异


var o=document.getElementById（'output'）；
var wmd1=document.getElementById（'whats-my-dims1'）；
var somehiddenddiv=document.querySelector（“#some hiddenddiv”）；
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'
#一些隐藏的div{
显示：无；
}
.我的影子是什么{
宽度：75px；
高度：42px；
背景色：#f00；
}

处理…：P
所以。。。如何获得whats-my-dims1的宽度和高度？
使用
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（“宽度”）
+ '", "' 
+window.getComputedStyle（wmd1）.getPropertyValue（“高度”）
+“，wmd2:”
+getComputedStyle（wmd2）.getPropertyValue（“宽度”）+“，”
+getComputedStyle（wmd2）.getPropertyValue（“高度”）+“
#一些隐藏的div{
显示：无；
}
.我的影子是什么{
显示：块；
宽度：69px；
高度：42px；
背景色：#f00；
}

处理…：P
所以。。。如何获得whats-my-dims1的宽度和高度？
您可以添加以下内容：

var wmd1Style = window.getComputedStyle(wmd1);
o.innerHTML = 'wmd1: "' + parseInt(wmd1Style['width'], 10) + '", "' + parseInt(wmd1Style['height'], 10) + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';

对于需要此功能来实现上下文菜单或提示窗口的用户：

getComputedStyle（）
似乎不适用于具有动态宽度/高度的元素。您只需要
auto

我的方法是设置
visibility:hidden
和设置
display
，而不是
none
（显示元素所需的内容）

我在上下文菜单组件中使用了此3步方法，用于计算相对于要始终显示在屏幕上的单击位置放置菜单的位置：

设置
可见性：隐藏
并删除
显示：无
（设置为最终显示菜单时的状态）
获取尺寸
删除可见性：隐藏
当父对象也有显示：无时，它可能仍然不起作用，但对于这个用例来说这不是问题，因为人们不能（不应该）访问一个对象的上下文菜单，而这个对象没有显示出来。
我使用一种方法，由于某些原因，工作，但是，有趣的是，我不能正确地解释为什么。基本上，在我的用例中，我需要知道选项卡的高度，以便在Villa js中平滑地切换它们

为了计算高度，我在javascript中执行以下步骤：

元素被显示，但带有“高度：0px”和“溢出：隐藏”（可替代“显示：无”）
将元素设置为“高度：自动”
计算具有offsetHeight特性的图元的高度
将元素设置回“高度：0px”
将计算出的高度设置为setTimeout内的元素，并结合css转换以实现更平滑的转换
我期望动画闪烁，但它没有。能够做到这一点让我大吃一惊，因为这可能是这里最简单的解决方案，但如果您了解它的工作原理，并且看到这样做的任何缺点，请随时分享您的想法


函数切换选项卡（）{
让tabs=document.queryselectoral（'.accordionX a span'））
tabs.forEach（tab=>{
tab.addEventListener（'click'，函数（e）{
tab.classList.toggle（'active'）
if（tab.classList.contains（'active'））{
//隐藏其他选项卡
tabs.forEach（tab=>{
如果（制表符！=e.target）{
tab.classList.remove（'active'）；
tab.parentElement.nextElementSibling.style.height='0px'；
}
})
var tabContent=tab.parentElement.nextElementSibling；
tabContent.style.height='auto'；
var tabHeight=tabContent.offsetHeight+'px'
tabContent.style.height='0px'；
setTimeout（函数（）{tabContent.style.height=tabHeight}，15）
}否则{
tab.classList.remove（'active'）；
tab.parentElement.nextElementSibling.style.height='0px'；
}
})
})
}切换选项卡（）
.accordionX{margin:0px 20px}
.accordionX>li{边框底部：1px实心#e7e7e7；位置：相对；列表样式类型：无}
.acordionx>li:第一个孩子{边框顶部：1px sol