javascript button.style.backgroundColor 返回 "" 直到单击

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或link标签内附加的样式。

否则你会使用getCompulatedStyle()

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

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

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

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;
}