如何将css属性的实际值传递给javascript变量

Question

所以我想做的似乎应该很简单，但由于某种原因，它不起作用，所以我可能错过了一些东西。

请记住，#元素标题选择器在另一个脚本的3个文本字符串之间旋转。

这是JS代码

var elementTitles = new Array (
"titleOne",
"titleTwo",
"titleThree"
);
var elementCurrentTitle = document.getElementById("element-title").innerHTML;
var elementOneColor = document.getElementById("element-1-id").style.color;
var elementTwoColor = document.getElementById("element-2-id").style.color;
var elementThreeColor = document.getElementById("element-3-id").style.color;
function rotateTitleColors(){
if (elementCurrentTitle == elementTitles[0]){
elementOneColor = "black";
elementTwoColor = "grey";
elementThreeColor = "grey";
};
else if (elementCurrentTitle == elementTitles[1]){
elementOneColor = "grey";
elementTwoColor = "black";
elementThreeColor = "grey";
};
else if (elementCurrentTitle == elementTitles[2]){
elementOneColor = "grey";
elementTwoColor = "grey";
elementThreeColor = "black";
};
};

基本上，这个想法是，根据当前#元素标题选择器的innerHTML是什么，相应的元素(只是文本(将是黑色的，其他元素将是灰色的，因此当前元素看起来是高亮显示的。

由于某种原因，它不起作用，我试着做一些非常简单的事情来测试它

var elementOneColor = document.getElementById("element-1-id").style.color;
function logElementColor(){
console.log(elementOneColor);
};

控制台上什么也没有显示。我应该如何获得css"的实际值；颜色"；属性，以便将其传递到变量中？

提前感谢！

Answer 1

如果变量被重新分配，则不能将属性分配给变量并期望原始属性在JavaScript中发生更改。

let a = { b: 'car', c: 'bike' }
let b = a.b
console.log(b)
// "car"
console.log(a)
// { b: "car", c: "bike" }
b = "cat"
console.log(b)
// "cat"
console.log(a)
// { b: "car", c: "bike" }

请注意，即使我们更改了b的值，a.b仍然保持不变。这对于大多数编程语言都是一样的。

解决方案

您可以直接将元素指定给变量并更改其颜色，而不是指定颜色。

var elementTitles = [
"titleOne",
"titleTwo",
"titleThree"
];
var elementCurrentTitle = document.getElementById("element-title").innerHTML;
var elementOneColor = document.getElementById("element-1-id");
var elementTwoColor = document.getElementById("element-2-id");
var elementThreeColor = document.getElementById("element-3-id");
function rotateTitleColors() {
if (elementCurrentTitle === elementTitles[0]) {
elementOneColor.style.color = "red";
elementTwoColor.style.color = "green";
elementThreeColor.style.color = "green";
} else if (elementCurrentTitle === elementTitles[1]) {
elementOneColor.style.color = "green";
elementTwoColor.style.color = "red";
elementThreeColor.style.color = "green";
} else if (elementCurrentTitle === elementTitles[2]) {
elementOneColor.style.color = "green";
elementTwoColor.style.color = "green";
elementThreeColor.style.color = "red";
}
};
rotateTitleColors()
function logElementColor() {
console.log(elementOneColor.style.color);
};
logElementColor()

<h2 id="element-title">titleOne</h2>
<p id="element-1-id">Apple</p>
<p id="element-2-id">Orange</p>
<p id="element-3-id">Cat</p>

错误

代码中几乎没有错误。

1. 使用分号;终止if块。块不应该被终止。如果你在else If中这样做，它会抛出一个错误，说"；意外的else。

2. 只有当您需要"抽象相等比较"时，才使用double等于==。在这种情况下，您需要"严格相等比较"，即不转换类型。

// Abstract Equality Comparison
console.log('12' == 12) // true
// Strict Equality Comparison
console.log('12' === 12) // false

Answer 2

element.style.color仅在通过style属性在元素上显式设置style时返回值。否则它将是空的。为了获得"；计算的"；样式，则需要使用window.getComputedStyle((，请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

示例：

Html:

<div>
<span id="element-1-id" style="color:blue">abc</span>
<span id="element-2-id">abc</span>
</div>

Javascript：

var ey = document.getElementById("element-1-id");
console.log(ey.style.color) // will print blue
console.log(window.getComputedStyle(ey).color) // will print rgb(0, 0, 255) which is blue
ey = document.getElementById("element-2-id");
console.log(ey.style.color)  // will print empty string
console.log(window.getComputedStyle(ey).color) // will print rgb(x, y, z)    

这取决于应用于该元素的样式表规则，从而为其指定了什么颜色。