为什么js的style.display取不到css样式表里面的样式？同样的是否还有其它属性也有这样的问题？

Question

1、遇到这个问题是因为在实现点击一个按钮控制另一个元素显隐的时候遇到了需要第二次点击按钮元素才会显示的问题；
2、网上查了下，查到的结果是因为js的style.display取不到css样式表里面的样式
3、我的代码

<!--打赏-->
            <div class="row reward"><button class="btn btn-success" id="reward-btn">打赏</button></div>
            <div class="reward-code row" style="display:none;">
                <img src="images/reward.jpg">
            </div>
            

4、我试了网上的做法，将display写成内联样式，确实有用。但依然不懂为什么js取不到css样式表中的样式？获取这个问题是否还有别的解决办法？同样的这种问题是否别的样式也存在？

Answer 1

问题1：请查看HTMLElement.style的定义：HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象，表示元素的 内联style 属性（attribute），但忽略任何样式表应用的属性。
链接：查看HTMLElement.style的定义

问题2： 你可以定义class，然后用js addClass、removeClass
问题3： 别的样式也存在这种问题

Answer 2

js 可以获取到最终样式，也可以获取到css样式表中的样式，一般都是直接获取最终样式来处理，获取样式表的内容去动态修改反而麻烦；

获取最终样式：
“DOM2 级样式”增强了document.defaultView，提供了getComputedStyle()方法，可以调用最终的样式(嵌入式样式、外部样式表、内联样式综合的样式表现)。

var myDiv = document.getElementsByClassName("reward-code")[0];
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.display); //none

兼容IE8及之前版本看这里

获取 css 样式表样式：
js 高程 335页，内容比较多不贴了，而且不大常用，需要的话，可以自己下载看看；

Answer 3

这篇文章讲的挺详细的https://www.cnblogs.com/mayuf...