Почему выводит пустой цвет фона у элемента?

Question

[stan288]

Пытаюсь вывести в консоль цвет элемента, выводит просто пустую строку


Хотя если например присвоить этому значению black, цвет меняется у элемента. Почему изначально выводит пустую строку, хотя должно выводить red?

Comments

[WbICHA]

В честь чего должен быть ред, если у элемента цвет не указан?

[stan288]

WbICHA, как он тогда красный, если не указан?

[WbICHA]

stan288, потому что ты ему казал класс, а вот в классе уже указан красный.

[stan288]

WbICHA, ясненько, то есть чтобы в объекте со стилями правильно выводило стиль элемента, нужно чтобы была подобная запись <div style="background-color: red;" class="test">
? Я думал что не имеет значения в css стиль прописан, или нет.. Не знал этот момент

Answer 1

[Антон Антон]

https://developer.mozilla.org/en-US/docs/Web/API/W...

Answer 2

[Сергей Соколов]

red.style.backgroundColor – берётся элемент red,
его свойство style содержит инлайновые стили, назначенные именно этому элементу. Напрямую.

Не унаследованные через листы стилей, предопределённые браузером, назначенные браузерным расширением.

Напрямую свойство в style:

const el = document.createElement('div');
div.style.backgroundColor = "red";

div.style.backgroundColor // "red"

Добавленный класс:

div.classList.add("green-text"); // CSS .green-text { color: green; }

div.style.color // ""

Прямо в разметке
<p style="font-weight: bold">Bold</p>

document.querySelector('p').style.fontWeight // "bold"

Унаследованный от родителя

<p style="font-weight: bold">
  <span>Bold</span>
</p>

document.querySelector('span').style.fontWeight // ""

Answer 3

[Teleweb developer]

А попробуйте так(это если цвет установили динамически):

getComputedStyle(red, null).getPropertyValue("background-color")