为何JavaScript无法读取外部CSS的visibility属性以控制元素显隐？

问题场景 #

当仅在外部CSS文件中为.share-menu元素设置visibility: hidden时，JS代码无法通过读取shareMenu.style.visibility判断元素状态并切换显隐；只有在HTML行内style属性中添加visibility: hidden时，JS才能正常工作。

相关代码如下：
HTML (file.html)

<div class="share-menu" id="share-menu" style="visibility: hidden;">
    <div class="facebook">Facebook</div>
    <div class="whatsapp">WhatsApp</div>
    <div class="twitter">Twitter</div>
    <div class="telegram">Telegram</div>
    <div class="linkedin">Linkedin</div>
</div>

JS (file.js)

let shareBtn = document.getElementById("share-btn");
let shareMenu = document.getElementById("share-menu");

shareBtn.addEventListener("click", function(){
     if(shareMenu.style.visibility == "hidden"){
        shareMenu.style.visibility = "visible";
    }else if(shareMenu.style.visibility == "visible"){
        shareMenu.style.visibility = "hidden";
    }
});

CSS (file.css)

.share-menu{
position: absolute;
z-index: 10;
top: 80px;
width: 140px;
height: max-content;
display: flex;
visibility: hidden;
flex-direction: column;
align-items: center;
background-color: white;
box-shadow: 7px 7px 15px 4px rgba(0, 0, 0, 0.25);
border-radius: 18px;
font-weight: bold;
}

问题原因 #

element.style只能读取元素的行内样式，外部CSS文件或<style>标签里定义的样式不会被包含在这个属性中。当你仅在外部CSS设置visibility: hidden时，shareMenu.style.visibility的值是空字符串，导致你的if判断条件永远不成立，自然无法触发状态切换。

解决方案 #

方案1：使用getComputedStyle获取计算后的样式

通过window.getComputedStyle()可以获取元素最终应用的所有样式（包括外部CSS、内部样式和行内样式），修改JS代码如下：

let shareBtn = document.getElementById("share-btn");
let shareMenu = document.getElementById("share-menu");

shareBtn.addEventListener("click", function(){
    const currentVisibility = window.getComputedStyle(shareMenu).visibility;
    if(currentVisibility === "hidden"){
        shareMenu.style.visibility = "visible";
    } else {
        shareMenu.style.visibility = "hidden";
    }
});

方案2：用CSS类控制显隐（更推荐）

这种方法将样式逻辑完全放在CSS中，JS只负责切换类名，符合关注点分离的原则，代码更易维护：

1. 修改CSS，新增一个控制隐藏的类，同时移除.share-menu里的visibility: hidden（或保留但用类叠加覆盖）：

.share-menu{
    position: absolute;
    z-index: 10;
    top: 80px;
    width: 140px;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    box-shadow: 7px 7px 15px 4px rgba(0, 0, 0, 0.25);
    border-radius: 18px;
    font-weight: bold;
    visibility: visible; /* 默认可见，可省略，因为浏览器默认值就是visible */
}

.share-menu.hidden {
    visibility: hidden;
}

2. 修改HTML，初始给元素添加hidden类：

<div class="share-menu hidden" id="share-menu">
    <div class="facebook">Facebook</div>
    <div class="whatsapp">WhatsApp</div>
    <div class="twitter">Twitter</div>
    <div class="telegram">Telegram</div>
    <div class="linkedin">Linkedin</div>
</div>

3. 简化JS代码，直接切换类名：

let shareBtn = document.getElementById("share-btn");
let shareMenu = document.getElementById("share-menu");

shareBtn.addEventListener("click", function(){
    shareMenu.classList.toggle("hidden");
});

内容的提问来源于stack exchange，提问作者Hasnat Khattak