CSS 中定义的可见性值未显示在 Javascript 中

Visibility values defined in CSS not showing in Javascript

本文关键字：显示 Javascript 可见性 定义 CSS      更新时间：2023-09-26

以下代码生成预期的结果：

<script>
function Show_Visibility(){
    p = document.getElementById("i_button_2");
    alert(p.style.visibility);
}
</script>
<INPUT TYPE = "button"   id = "i_button_1"  value = "This is Button 1"   onclick="Show_Visibility()">
<br>
<INPUT TYPE = "button"   id = "i_button_2"  value = "This is Button 2">
<script>
p = document.getElementById("i_button_2");
p.style.visibility = "hidden";
</script>

但是，如果我们将按钮 2 的可见性定义为在 CSS 中隐藏，则在加载页面时按钮确实是隐藏的，但 Javascript 警报消息是空白的。

#i_button_2{visibility: hidden;}
<script>
function Show_Visibility(){
    p = document.getElementById("i_button_2");
    alert(p.style.visibility);  
}
</script>
<INPUT TYPE = "button"   id = "i_button_1"  value = "This is Button 1"   onclick="Show_Visibility()">
<br>        
<INPUT TYPE = "button"   id = "i_button_2"  value = "This is Button 2">

为什么会这样？

您应该使用 getComputedStyle 通过样式表应用样式：

alert(getComputedStyle(p).visibility);

来自MDN文章：

从getComputedStyle返回的对象是只读的，可用于检查元素的样式（包括由元素或外部样式表设置的样式）。elt.style 对象应该用于设置特定元素的样式。

相关文章：