Question

function chgBkColor(v) {
  v.style.backgroundColor === "rgb(255, 255, 255)" ?
    v.style.backgroundColor = "#50AAD7" :
    v.style.backgroundColor = "#fff"
};

.dowBtn {
  background-color: #fff;
  border-radius: 0.7em;
  border: 1px solid #ddd;
}

<button onclick='chgBkColor(this);' id="su" class="dowBtn">Su</button>

当我单击按钮时，第一次单击不起作用，并且v.style为空白。我已经尝试过使用documentGetElementById的各种方法，并且都以相同的方式发生。

每次单击后都能很好地切换背景颜色。

Answer 1

它不起作用，因为您没有初始化颜色，所以它不等于任何东西，因此会应用白色：

<button onclick='chgBkColor(this);' id="su" class="dowBtn" style="background-color: #fff">Su</button>

使用.style.xxx时，您将直接访问在属性style="xxx"内的元素上设置的样式，但不包括从style或{{1}内附加的样式}标签。

否则，您将使用getComputedStyle()

在应用活动样式表并解析了这些值可能包含的所有基本计算之后，Window.getComputedStyle（）方法将返回一个包含元素的所有CSS属性值的对象。可以通过对象提供的API或使用CSS属性名称建立索引来访问各个CSS属性值。

这会考虑到在css类中设置的值，而不仅仅是在元素上设置的值（基本上，您正在访问其当前的视觉样式）。

link

function chgBkColor(v) {
    getComputedStyle(v).backgroundColor === "rgb(255, 255, 255)" ?
            v.style.backgroundColor = "#50AAD7" :
                    v.style.backgroundColor = "#fff"
};

.dowBtn {
    background-color: #fff;
    border-radius: 0.7em;
    border: 1px solid #ddd;
}

Answer 2

之所以会这样，是因为按钮的背景值未定义，因此请重新排序代码并像这样设置背景：

<button onclick='chgBkColor(this);' id="su" class="dowBtn">su</button>
<script>
document.getElementById("su").style.backgroundColor = "rgb(255, 255, 255)"
function chgBkColor(v) {
v.style.backgroundColor === "rgb(255, 255, 255)" ?
        v.style.backgroundColor = "#50AAD7" :
                v.style.backgroundColor = "#fff"
};
</script>

javascript button.style.backgroundColor返回“”，直到被点击

2 个答案: