JavaScript点击事件失效及.style属性无法正确读取CSS样式问题求助

DOM元素的.style属性仅支持读取和修改元素的行内样式（即定义在标签style属性内的样式规则），无法读取外部样式表、<style>标签中定义的样式，这是你遇到两个问题的核心原因：

• 判断逻辑不触发：h1的color: orange定义在样式表中，通过h1.style.color读取到的值为空字符串，无法与orange匹配，条件不成立。
• div的display值为空：div的display: none同样定义在样式表中，div.style.display无法读取到样式表规则，返回空字符串。

方案1：使用getComputedStyle读取生效样式 #

window.getComputedStyle()方法可以获取元素所有样式规则最终计算后的生效值，支持读取样式表、行内等所有来源的样式。注意：该方法返回的颜色值为RGB格式，orange对应的返回值为rgb(255, 165, 0)，判断时需要对应匹配。

修改后的JS代码如下：

const h1 = document.querySelector('h1');
const div = document.querySelector('div');
const btn = document.querySelector('button');

btn.addEventListener('click', () => { 
    const computedH1Style = window.getComputedStyle(h1);
    if(computedH1Style.color === 'rgb(255, 165, 0)'){
        div.style.display = 'block';
    };
    // 读取div生效的display值
    console.log(window.getComputedStyle(div).display);
});

方案2：通过类名控制状态（更推荐） #

直接判断颜色值存在兼容风险，不同浏览器对颜色值的返回格式可能有差异，更稳妥的方式是抽离状态类控制样式，逻辑更清晰易维护。

CSS修改：

h1{
    color: orange;
}
div{
    height: 100px;
    width: 100px;
    background-color: red;
    margin-bottom: 40px;
}
/* 单独抽离隐藏状态类 */
.hidden {
    display: none;
}

HTML修改：给div添加默认隐藏类

<div class="hidden"></div>

JS修改：

const h1 = document.querySelector('h1');
const div = document.querySelector('div');
const btn = document.querySelector('button');
const computedH1Style = window.getComputedStyle(h1);

btn.addEventListener('click', () => { 
    if(computedH1Style.color === 'rgb(255, 165, 0)'){
        div.classList.remove('hidden');
    };
});

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