Как получить значение css свойства js

window.getComputedStyle()

Метод Window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать. Некоторые CSS-свойства доступны через API, предоставляемые объектом, или индексацию по именам CSS-свойств.

Синтаксис

var style = window.getComputedStyle(element [, pseudoElt]);

Element , свойства которого необходимо получить.

Строка указывающая на найденный псевдо-элемент. Опускается (или null ) для не псевдо-элементов.

Возвращённый style живой CSSStyleDeclaration объект, который обновляется автоматически когда элемент стилей изменяется.

Выводы

Метод Window.getComputedStyle() предоставляет все значения CSS-свойств элементов после применения текущей таблицы стилей или базового расчёта каких-либо значений, которые могут быть.

Пример

var elem1 = document.getElementById("elemId"); var style = window.getComputedStyle(elem1, null); // this is equivalent: // var style = document.defaultView.getComputedStyle(elem1, null); 

style> #elem-container position: absolute; left: 100px; top: 200px; height: 100px; > /style> div id="elem-container">dummy/div> div id="output">/div> script> function getTheStyle() var elem = document.getElementById("elem-container"); var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height"); document.getElementById("output").innerHTML = theCSSprop; > getTheStyle(); /script> 

function dumpComputedStyles(elem, prop)  var cs = window.getComputedStyle(elem, null); if (prop)  console.log(prop + " : " + cs.getPropertyValue(prop)); return; > var len = cs.length; for (var i = 0; i  len; i++)  var style = cs[i]; console.log(style + " : " + cs.getPropertyValue(style)); > > 

Описание

Возвращённый объект — это такой же объект, который возвращается из свойства элемента style (en-US); Так или иначе, эти два объекта имеют разные назначения. Объект который возвращается из getComputedStyle только для чтения и может быть использован для инспектирования стиля элемента (включая описание из элемента или внешней таблицы стилей). Объект element.style следует использовать для установки стилей на специфических элементах.

Первый аргумент должен быть элементом (вставка узлов которые не являются элементами, например #text выдаст ошибку).

defaultView

Во многих примерах кода, getComputedStyle используется из объекта document.defaultView . Почти во всех случаях это не нужно, поскольку getComputedStyle существует в объекте window . Это что-то на подобии шаблона defaultView который был некой прослойкой. Люди не хотели писать спецификацию для window и создавали API которое также могло использоваться для Java. Так или иначе есть только один случай когда метод defaultView должен использоваться: когда вы используете Firefox 3.6 чтобы получить доступ к вычисленным стилям.

Использования с псевдо-элементами

getComputedStyle может получить информацию о стилях из псевдо-элемента (например — ::after , ::before , ::marker , ::line-marker — спецификация).

style> h3::after  content: "rocks!"; > style> h3>generated contenth3> script> var h3 = document.querySelector("h3"); var result = getComputedStyle(h3, ":after").content; console.log("the generated content is: ", result); // возвратит 'rocks!' script> 

Notes

The values returned by getComputedStyle are known as resolved values . These are usually the same as the CSS 2.1 computed values , but for some older properties like width , height or padding , they are instead the used values . Originally, CSS 2.0 defined the computed values to be the «ready to be used» final values of properties after cascading and inheritance, but CSS 2.1 redefined computed values as pre-layout, and used values as post-layout. For CSS 2.0 properties, the getComputedStyle function returns the old meaning of computed values, now called used values. An example of difference between pre- and post-layout values includes the resolution of percentages that represent the width or the height of an element (also known as its layout), as those will be replaced by their pixel equivalent only in the used value case.

The returned value is, in certain known cases, expressly inaccurate by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly «lie» about the used value for a link and always return values as if a user has never visited the linked site. See http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented. Most other modern browsers have applied similar changes to the application of pseudo-selector styles and the values returned by getComputedStyle .

During a CSS transition, getComputedStyle returns the original property value in Firefox, but the final property value in WebKit.

In Firefox, properties with the value auto return the used value, not the value auto . So if you apply top:auto; and bottom:0 ; on an element with height:30px and its containing block is height:100px; , upon requesting the computed style for top , Firefox will return top:70px , as 100px-30px=70px .

Спецификации

• DOM Level 2 Style: getComputedStyle
• CSS Object Model specification

Совместимость с браузерами

BCD tables only load in the browser

Смотреть также

• window.getDefaultComputedStyle (en-US)
• Resolved Value

Стили и классы

До того, как начнёте изучать способы работы со стилями и классами в JavaScript, есть одно важное правило. Надеемся, это достаточно очевидно, но мы всё равно должны об этом упомянуть.

Как правило, существует два способа задания стилей для элемента:

1. Создать класс в CSS и использовать его:
2. Писать стили непосредственно в атрибуте style : .

JavaScript может менять и классы, и свойство style .

Классы – всегда предпочтительный вариант по сравнению со style . Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться».

Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript:

let top = /* сложные расчёты */; let left = /* сложные расчёты */; elem.style.left = left; // например, '123px', значение вычисляется во время работы скрипта elem.style.top = top; // например, '456px'

Мы также можем установить сразу несколько стилей для элемента, используя свойство cssText . Но с ним нужно быть осторожнее, т.к оно может как добавить стили к существующим, так и полностью перезаписать их на новые:

let top = /* сложные расчёты */; let left = /* сложные расчёты */; // полная перезапись стилей elem, используем = elem.style.cssText = ` top: $; left: $; `; // добавление новых стилей к существующим стилям elem, используем += elem.style.cssText += ` top: $; left: $; `; // если элементу уже заданы стили, которые мы хотим добавить (+=), // они будут перезаписаны на новые.

В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение.

className и classList

Изменение класса является одним из наиболее часто используемых действий в скриптах.

Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа «class» не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class .

Поэтому для классов было введено схожее свойство «className» : elem.className соответствует атрибуту «class» .

Если мы присваиваем что-то elem.className , то это заменяет всю строку с классами. Иногда это то, что нам нужно, но часто мы хотим добавить/удалить один класс.

Для этого есть другое свойство: elem.classList .

elem.classList – это специальный объект с методами для добавления/удаления одного класса.

Так что мы можем работать как со строкой полного класса, используя className , так и с отдельными классами, используя classList . Выбираем тот вариант, который нам удобнее.

• elem.classList.add/remove(«class») – добавить/удалить класс.
• elem.classList.toggle(«class») – добавить класс, если его нет, иначе удалить.
• elem.classList.contains(«class») – проверка наличия класса, возвращает true/false .

Кроме того, classList является перебираемым, поэтому можно перечислить все классы при помощи for..of :

Свойство style

Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте «style» .

Свойства из одного слова записываются так же, с маленькой буквы:

background => elem.style.background top => elem.style.top opacity => elem.style.opacity

Для свойств из нескольких слов используется camelCase:

background-color => elem.style.backgroundColor z-index => elem.style.zIndex border-left-width => elem.style.borderLeftWidth

document.body.style.backgroundColor = prompt('background color?', 'green');

Свойства с префиксом

Стили с браузерным префиксом, например, -moz-border-radius , -webkit-border-radius преобразуются по тому же принципу: дефис означает заглавную букву.

button.style.MozBorderRadius = '5px'; button.style.WebkitBorderRadius = '5px';

Сброс стилей

Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его.

Например, чтобы скрыть элемент, мы можем задать elem.style.display = «none» .

Затем мы можем удалить свойство style.display , чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = «» .

// если мы запустим этот код, "мигнёт" document.body.style.display = "none"; // скрыть setTimeout(() => document.body.style.display = "", 1000); // возврат к нормальному состоянию

Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было.

Следите за единицами измерения

Не забудьте добавить к значениям единицы измерения.

Например, мы должны устанавливать 10px , а не просто 10 в свойство elem.style.top . Иначе это не сработает:

Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него.

Вычисленные стили: getComputedStyle

Итак, изменить стиль очень просто. Но как его прочитать?

Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?

Свойство style оперирует только значением атрибута «style» , без учёта CSS-каскада.

Поэтому, используя elem.style , мы не можем прочитать ничего, что приходит из классов CSS.

Например, здесь style не может видеть отступы:

  body Красный текст  

…Но что, если нам нужно, скажем, увеличить отступ на 20px ? Для начала нужно его текущее значение получить.

Для этого есть метод: getComputedStyle .

getComputedStyle(element, [pseudo])

element Элемент, значения для которого нужно получить pseudo Указывается, если нужен стиль псевдоэлемента, например ::before . Пустая строка или отсутствие аргумента означают сам элемент.

Результат вызова – объект со стилями, похожий на elem.style , но с учётом всех CSS-классов.

  body   

Вычисленное (computed) и окончательное (resolved) значения

Есть две концепции в CSS:

1. Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, height:1em или font-size:125% .
2. Окончательное (resolved) значение – непосредственно применяемое к элементу. Значения 1em или 125% являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, height:20px или font-size:16px . Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, width:50.5px .

Давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился.

Так что, в настоящее время getComputedStyle фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях.

getComputedStyle требует полное свойство!

Для правильного получения значения нужно указать точное свойство. Например: paddingLeft , marginTop , borderTopWidth . При обращении к сокращённому: padding , margin , border – правильный результат не гарантируется.

Например, если есть свойства paddingLeft/paddingTop , то что мы получим вызывая getComputedStyle(elem).padding ? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.

Стили, применяемые к посещённым :visited ссылкам, скрываются!

Посещённые ссылки могут быть окрашены с помощью псевдокласса :visited .

Но getComputedStyle не даёт доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку, проверив стили.

JavaScript не видит стили, применяемые с помощью :visited . Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к :visited CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для «злой» страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность.

Итого

Для управления классами существуют два DOM-свойства:

• className – строковое значение, удобно для управления всем набором классов.
• classList – объект с методами add/remove/toggle/contains , удобно для управления отдельными классами.

Чтобы изменить стили:

• Свойство style является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте «style» . Чтобы узнать, как добавить в него important и делать некоторые другие редкие вещи – смотрите документацию.
• Свойство style.cssText соответствует всему атрибуту «style» , полной строке стилей.

Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется:

• Метод getComputedStyle(elem, [pseudo]) возвращает объект, похожий по формату на style . Только для чтения.

Задачи

Создать уведомление

важность: 5

Напишите функцию showNotification(options) , которая создаёт уведомление: с заданным содержимым. Уведомление должно автоматически исчезнуть через 1,5 секунды.

Пример объекта options :

// показывает элемент с текстом "Hello" рядом с правой верхней частью окна. showNotification(< top: 10, // 10px от верхней границы окна (по умолчанию 0px) right: 10, // 10px от правого края окна (по умолчанию 0px) html: "Hello!", // HTML-уведомление className: "welcome" // дополнительный класс для div (необязательно) >);

Используйте CSS-позиционирование для отображения элемента в заданных координатах. Исходный документ имеет необходимые стили.

Как получить значение свойства css через javascript

Чтобы получить значения CSS свойств через JavaScript можно воспользоваться методом window.getComputedStyle() . Этот метод возвращает объект, содержащий значения всех CSS свойств элемента после применения всех таблиц стилей, а также значения свойств по умолчанию для данного элемента.

Так как метод возвращает обычный JavaScript объект, то далее мы можем обращаться к нужным нам свойствам (ключам) этого объекта.

Рассмотрим небольшой пример. В HTML документе находится параграф с каким-то текстом. Для параграфа заданы следующие стили:

p  color: red; text-align: center; font-weight: bold; font-size: 20px; word-spacing: 10px; > 

Переходим в JavaScript документ:

const el = document.querySelector('p'); // получаем наш параграф const styles = window.getComputedStyle(el); // получаем объект со всеми вычисленными стилями // Теперь можем обращаться к нужным нам CSS свойствам: console.log(styles.wordSpacing) // => 10px console.log(styles.textAlign) // => center console.log(styles.color) // => rgb(255, 0, 0) 

Функция getComputedStyle

Функция getComputedStyle позволяет получить значение любого CSS свойства элемента, даже из CSS файла.

Синтаксис

let объект = getComputedStyle(элемент);

Подробности

Как оно работает (внимание: не так как мы ожидаем): параметром функция принимает элемент, а возвращает объект, который содержит в себе все CSS свойства переданного элемента. Давайте положим этот объект в переменную style . Название произвольное, это просто переменная — как придумаем, так и будем обращаться:

let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); // в style лежат CSS свойства

Давайте выведем, к примеру, ширину. Это делается так — style.width :

let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(style.width);

Чтобы вывести, к примеру, левый padding — делаем так — style.paddingLeft :

let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(style.paddingLeft);

В следующем примере мы выведем все интересующие нас CSS свойства для нашего элемента:

#elem < width: 200px; height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; >let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(‘paddingLeft: ‘ + style.paddingLeft); // выведет ’30px’ console.log(‘borderTopWidth: ‘ + style.borderTopWidth); // выведет ’20px’ console.log(‘borderTopStyle: ‘ + style.borderTopStyle); // выведет ‘solid’

Неточность getComputedStyle

Иногда функция getComputedStyle работает не совсем корректно с шириной и высотой. Это связано с тем, что padding и граница расширяют блок. В следующем примере блоку задана ширина 200px , а также граница и border . Реальная ширина блока 300px , но getComputedStyle все равно выведет 200px :

#elem < width: 200px; height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; >let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(‘width: ‘ + style.width); // выведет ‘200px’ console.log(‘height: ‘ + style.height); // выведет ‘200px’

То есть: получается, что getComputedStyle игнорирует расширение блока показывает его размеры так, как будто этого расширения не было. Но это еще не все: также имеет значение наличие или отсутствие полосы прокрутки — некоторые браузеры отнимают ширину полосы прокрутки от ширины, вычисленной через getComputedStyle , а некоторые не отнимают. В общем тут вообще все не кроссбраузерно и лучше getComputedStyle для определения ширины и высоты не использовать, а пользоваться метриками, которые мы изучим чуть ниже.

Вычисленные значения

Есть еще один нюанс: если ширина задана в % — то после работы getComputedStyle мы увидим ее в px . То есть по сути мы получаем не заданную ширину, а вычисленную. Смотрите на следующем примере:

#elem < width: 30%; /* ширина задана в % */ height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; >let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(‘width: ‘ + style.width); // выведет ширину в px

Смотрите также

• свойство cssText ,
  которое массово задает CSS стили