Как передать фактическое значение свойства css в переменную javascript

Question

То, что я пытаюсь сделать, кажется, должно быть довольно простым, но по какой-то причине это не работает, поэтому, возможно, я что-то упускаю.

Имейте в виду, что селектор # element-title вращается между 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 селектора # element-title, соответствующий элемент (который представляет собой просто текст) будет черным, а другие элементы будут серыми, поэтому текущий элемент выглядит выделено.

По какой-то причине это не работает, и я попытался сделать что-то очень простое, чтобы проверить это.

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

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

И в консоли ничего не отображается. Как мне получить фактическое значение свойства css "color", чтобы передать его в переменную?

Заранее спасибо!

javascript css

1

gblanglois 14 Янв 2021 в 05:09

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>

Ошибки

В вашем коде было несколько ошибок.

Завершение блока if точкой с запятой, ;. Блоки не должны быть прекращены. Если вы сделаете это в else if, будет выдана ошибка "Неожиданно else".
Используйте двойное равенство == только тогда, когда вам нужно сравнение абстрактного равенства. В этом случае вам нужно строгое сравнение на равенство, т.е. типы не конвертируются.

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

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

0

Pushkin 14 Янв 2021 в 03:07

Answer 2

Element.style.color возвращает значение, только если стиль был явно установлен для элемента через атрибут 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)

В зависимости от того, какие правила таблицы стилей применялись к этому элементу, в результате какой цвет ему был назначен.

0

PhazorP 14 Янв 2021 в 02:31

Как передать фактическое значение свойства css в переменную javascript

2 ответа

Решение

Ошибки

Похожие вопросы

Новые вопросы

javascript