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

Question

So what I'm trying to do seems like it should be quite simple, but for some reason it's not working so maybe I'm missing something.

Keep in mind the #element-title selector is rotating between 3 strings of text with another script.

Here's the JS code

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

Basically, the idea is that depending on what the innerHTML of the #element-title selector is at the moment, it's the corresponding element (which is just text) that will be black and the other elements will be grey so the current element is looks highlighted.

For some reason it's not working and I've tried to do something very simple to test it.

var elementOneColor = document.getElementById("element-1-id").style.color;

function logElementColor(){
    console.log(elementOneColor);
};

And nothing shows up in the console. How am I supposed to get the actual value of the css "color" property so that I can pass it into a variable?

Thanks in advance!

Answer 1

You cannot assign a property to a variable and expect that original property to change in JavaScript if the variable is reassigned.

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

Notice how even if we changed the value of b , ab still remains unchanged. This is same for most of the programming language.

Solution

You could instead of assigning the color, directly assign the element to a variable and change it's color.

 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>

Mistakes

There were few mistakes you have you in your code.

1. Terminating if block with a semicolon, ; . Blocks aren't supposed to be terminated. If you do in an else if, It will throw an error saying "Unexpected else .

2. Use double equals == only when you need Abstract Equality Comparison. In this case, you need Strict Equality Comparison, ie. types aren't converted.

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

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

Answer 2

element.style.color only returns value if style was explicitly set on the element via style attribute. Otherwise it will be empty. To get the "computed" style, you need to use window.getComputedStyle() see: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Example:

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)    

depending what the style sheet rules applied to this element resulted what color assigning to it.