Question

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

如果我第一次点击按钮＆＃34; console.log（elem.style.color）＆＃34;在＆＃34;函数changeColor＆＃34;不会返回绿色。第二次返回元素的颜色等。

＆＃13;

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

＆＃13;

.mypara1{
  color: green;
}

＆＃13;

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

＆＃13;

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

Answer 1

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

如果要获取计算出的样式，考虑到CSS规则，则需要使用window.getComputedStyle。请注意，结果可能与输入的结果略有不同（例如，使用chrome，颜色总是以rgb值的形式给出）。

＆＃13;

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

＆＃13;

.mypara1{
  color: green;
}

＆＃13;

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

＆＃13;

以下是在HTML而不是CSS中设置style属性的示例。即使在使用console.log时，elem.style第一次也可以看到。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在您的样式定义中，您要将类[THYMELEAF][http-nio-8080-exec-1] Exception processing template "users": Error during execution of processor 'org.thymeleaf.spring4.processor.attr.SpringInputGeneralFieldAttrProcessor' (users:31)的属性color设置为绿色。当您第一次看到mypara1时，它会通过<p>而不是class为其分配颜色，因此会间接设置颜色。举例说明：

转到您的jsfiddle链接
右键点击“此处有些文字”id
点击窗口菜单上的Inspect
在打开的开发工具新窗口中查看样式选项卡。
看到班级<p>有mypara1，没有color: green
点击“蓝色”或“红色”按钮
查看具有所需颜色的element.style的新属性。

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

看看这段代码片段，我添加了内联样式＆＃34;颜色：绿色＆＃34;到

标签，现在它在第一次调用函数时返回绿色。

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

3 个答案: