Почему element.style всегда возвращает пустой при предоставлении стилей в CSS?

Question

Когда вы определяете display:block в css, element.style.display возвращается всегда пустым.

console.log(document.getElementById('test').style.display)

#map {display: block;}

<div id="test">test</div>

Но если вы установите стиль в этом элементе, мы сможем получить детали style.display.

    console.log(document.getElementById('test').style.display)

 <div style="display:none" id="test">test</div>

Мне не нужны решения, потому что я знаю, что так много решений для этого:

getElementById (). Style.display не работает

Показать / скрыть Google Maps API не работает нормально

У меня другой вопрос.

Встроенный стиль не является хорошим способом кодирования.Поэтому мы всегда назначаем стиль в CSS.Но почему в CSS вместо элемента отображается пустое свойство предоставляют свойство стиля?В частности, JavaScript не может прочитать свойство стиля css?

Вы можете проверить здесь, все свойства стиля пусты, даже если я предоставляю display: block; align-content:center;. Почему?

console.log(document.getElementById('test').style)

#map {display: block;align-content:center;}

<div id="test">test</div>

Answer 1

element.style возвращает встроенный стиль, используемый в html-документе, и, поскольку стиль не задан непосредственно в html, вы получите пустое значение

Что вам нужно, так это computedStyle, который будет возвращать стиль, которыйприменяется к элементу

console.log(window.getComputedStyle(document.getElementById('test')).display)

#map {
      display: block;
      align-content:center;
    }

<div id="test">test</div>

Answer 2

Свойство HTMLElement.style используется для получения, а также для установки встроенного стиля элемента.При получении он возвращает объект CSSStyleDeclaration, который содержит список всех свойств стилей для этого элемента со значениями , назначенными для атрибутов, определенных в атрибуте встроенного стиля элемента .

HTMLElement.style

console.log(document.getElementById('test').style.display)

#map {
      display: block;
    }

<div id="test">test</div>

В приведенном выше фрагменте HTML-элемент не имеет атрибута style.Таким образом, свойство style вашего объекта JavaScript также не содержит свойства display.Итак, console.log(document.getElementById('test').style.display) ничего не печатает.

    console.log(document.getElementById('test').style.display)

 <div style="display:none" id="test">test</div>

В приведенном выше фрагменте HTML-элемент имеет атрибут стиля с «display».Таким образом, ваш объект JavaScript содержит свойство style, которое содержит свойство display.Вот почему console.log(document.getElementById('test').style.display) выводит 'none'

DOM API предоставляет способ манипулировать элементом HTML как объектами JavaScript.Ваши HTML-элементы могут иметь классы, определенные в их атрибуте class, которые предоставляют им свойства CSS, но ваш объект JavaScript содержит только имена классов в своем свойстве className.DOM API не анализирует CSS для обновления HTMLElements JavaScript.