Java脚本，单击事件不起作用并且.style不起作用[重复]答案

【问题标题】：Java script, click event not working and .style not working [duplicate]Java脚本，单击事件不起作用并且.style不起作用[重复]
【发布时间】：2021-08-30 21:26:06
【问题描述】：

我在 css 中有 H1，其颜色为橙色，但是当我在 JS 中进行点击事件时，如果语句要求 H1 的颜色为橙色才能继续进行，但它没有。我有一个 div，它只是一个红色正方形和我给了它一个没有的显示。而且当我将它登录到控制台时，它显示显示''即使我没有给它显示。

这是html：-

<body>
    <h1>hello worrld</h1>
    <p>this is a p tag</p>
    <div></div>
    <button> click me!</button>

    <script src="app.js"></script>
</body>

这是css：-

    h1{
    color: orange;
}
div{
    height: 100px;
    width: 100px;
    background-color: red;
    margin-bottom: 40px;
    display: none;
}

这是javascript：-

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


btn.addEventListener('click', () => { 
       
    if( h1.style.color == 'orange'){
        div.style.display = 'block';
    };
    
    console.log(div.style);
});

【问题讨论】：

按钮在表单内吗？单击按钮提交表单，该表单会重新加载页面并丢失样式更改。
h1.style 没有从 CSS 中获取样式，它只获取内联样式。
请将此 css 和 js 用于您的问题的 HTML 添加到您的问题中，或者最好添加一个可以重现您的问题的工作片段...
另外，style 从 CSS 类中检索内联样式而不是样式。为此，您需要获取计算的样式，例如 window.getComputedStyle(yourElement)
按照@PatrickEvans 的建议使用getComputedStyle。

标签： javascript html css

【解决方案1】：

现在在你的脚本上

console.log(h1.style.color);

这会返回空字符串。

如果你在元素中设置样式，

<h1 style="color:red">hello worrld</h1>

然后

console.log(h1.style.color);

将返回“红色”

【讨论】：

是的，没错。但在我的代码中，我希望 JS 看到我的 css 文件。我得到了一些答案告诉我使用 getComputedStyle() 但我似乎无法让它与“橙色”这个词一起使用
试试 jquery $("h1").css('color')