javascript - 如何使用 javascript 获取外部样式元素的 css 属性

Question

假设我有一个像这样的外部样式

 .box{
  background: red;
 }

然后也许在 javascript 中我想切换背景颜色，所以在应用之前我必须先检查它是否有特定的背景颜色

var box = document.querySelector('.box');

if(box.style.background=='red'){

box.style.background='pink';
}else{
box.style.background='red';

}

注意:我不是用它来开发，只是一个 js 学生

要添加一个小问题，如果我想将 css 转换应用于背景更改，将如何应用它。

虽然下面的代码有效，但我觉得有更简洁的方法

if(!box.style.background){ //this is because background property is null when reading from external css

    box.style.background='pink';

}else{

    box.style.background="";
}

但是对于过渡，我尝试应用过渡

 box.style.WebkitTransition='background 0.5s easeout';

但没有过境

Answer 1

要获取元素的计算样式(例如，应用样式表)，您可以使用getComputedStyle:

var box = /*...get a specific element...*/;
var style = getComputedStyle(box);
// Use the properties on `style`, which are like the ones on `element.style`

在旧版 IE 上，您使用元素的 currentStyle 属性代替。您可以像这样部分填充 getComputedStyle:

if (!window.getComputedStyle) {
    window.getComputedStyle = function(element, pseudoElement) {
        if (pseudoElement) {
            throw "The second argument for getComputedStyle cannot be polyfilled";
        }
        return element.currentStyle;
    };
}

例子:

if (!window.getComputedStyle) {
  window.getComputedStyle = function(element, pseudoElement) {
    if (pseudoElement) {
      throw "The second argument for getComputedStyle cannot be polyfilled";
    }
    return element.currentStyle;
  };
}


var foo = document.getElementById("foo");
var style = getComputedStyle(foo);
if (style) {
  snippet.log("Current color of #foo is: " + style.color);
}

.box {
  color: green;
}

<div id="foo" class="box">This is a box</div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>