javascript - 无法理解 element.style.color 的行为

Question

在下面的代码中，元素 para1 的颜色在开始时通过内部样式设置为绿色。

如果我第一次点击按钮，“function changeColor”中的“console.log(elem.style.color)”将不会返回绿色。第二次等返回元素的颜色。

function changeColor(newColor) {
  var elem = document.getElementById("para1");
  console.log(elem.style.color);
  elem.style.color = newColor;
}

.mypara1{
  color: green;
}

<p id="para1" class="mypara1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>

为什么内部样式设置的颜色没有返回？

Answer 1

原因是elem.style returns the style that is directly applied on a DOM element (例如，在 HTML 中，或通过 elem.style)，而不是 CSS 选择器产生的样式。

如果你想获得考虑到CSS规则的计算样式，你需要使用window.getComputedStyle .请注意，结果可能与输入的内容略有不同(例如，对于 chrome，颜色始终以 rgb 值给出)。

function changeColor(newColor) {
  var elem = document.getElementById("para1");
  console.log(getComputedStyle(elem).getPropertyValue("color"));
  elem.style.color = newColor;
}

.mypara1{
  color: green;
}

<p id="para1" class="mypara1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>

这是一个在 HTML 而不是 CSS 中设置样式属性的示例。看到 console.log 现在第一次工作，即使在使用 elem.style 时也是如此。

function changeColor(newColor) {
  var elem = document.getElementById("para1");
  console.log(elem.style.color);
  elem.style.color = newColor;
}

<p id="para1" class="mypara1" style="color: green;">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>