Путаница с отношениями CSS и JavaScript?

Question

У меня есть ячейка таблицы, которая имеет класс "cellActive". Который имеет следующее определение

.cellActive{background:"#DDDDDD"}

Теперь я пытаюсь прочитать свойство цвета фона для ячейки, и оно имеет значение null / "".

var bgColor = cell.style.backgroundColor; // returning ""

Это какая-то ошибка с моей стороны по поведению. Если класс CSS назначает CSS элементу, мы не можем прочитать его значение в JS? Означает ли это, что если мы не присваиваем свойство непосредственно элементу, мы не можем получить его, если оно наследуется?

Answer 1

Атрибут style содержит только явно установленные свойства, а не те, которые унаследованы от класса. Вам нужен так называемый «вычисляемый стиль», который отражает свойства так, как они были отображены.

См. Принятый ответ на этот вопрос для очень хорошего кросс-браузерного решения.

Answer 2

Существует разница между "background" и "background-color". Кроме того, свойство style означает, что свойство style элемента установлено в HTMl или Javascript. Используйте «computedStyle» для других случаев. Это означает использование метода getComputedStyle (), о котором вы можете узнать здесь .

Answer 3

Существуют различные способы доступа к CSS в JavaScript. Element.style фактически обращается к тому, что записано в атрибуте style. чтобы получить полный CSS, используйте getComputedStyle().