Для правильного получения значения нужно указать точное свойство. Например: paddingLeft, marginTop, borderTopWidth. При обращении к сокращённому: padding, margin, border – правильный результат не гарантируется.
Например, если есть свойства paddingLeft/paddingTop, то что мы получим вызывая getComputedStyle(elem).padding? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.
Есть и другие несоответствия. Например, некоторые браузеры (Chrome) отображают 10px в документе выше (см. картинку), а некоторые (Firefox) – нет.
Пример:
Вывод:
color: rgb(255, 0, 0) background color: rgb(255, 243, 212)
Как это работает:
Сначала определим CSS для класса в разделе заголовка HTML-файла. Цвет текста черный.
Во-вторых, объявим элемент абзаца, цвет текста которого будет красным, как определено во встроенном стиле. Это правило переопределит правило, определенное в разделе заголовка.
В-третьих, используем метод getComputedStyle(), чтобы получить все стили элемента абзаца. Свойство color имеет красный цвет, как указано в окне консоли ( rgb(255, 0, 0)), как и ожидалось.
#javascript
#браузер #документ #стили_классы