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

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

  • автор:

Как получить значение свойства 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) 

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

Как получить значения CSS переменных с помощью JavaScript

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

В прошлом, чтобы получить текущую контрольную точку без запроса ширины окна я делал что-то подобное:

Обновлено: 2023-06-04 19:38:45 Ангелина Писанюк автор материала

CSS:

body::before < content: 'mobile'; display: none; >@media screen and (min-width: 30rem) < body::before < content: 'large-mobile'; >> @media screen and (min-width: 70rem) < body::before < content: 'desktop'; >>

JavaScript:

function getBreakpoint() < return getComputedStyle(document.querySelector('body'), ':before') .getPropertyValue('content') .replace(/"/g, ''); >

Данный подход хорошо справляется со своей задачей. Но пользовательские свойства CSS обладают большей гибкостью.

Функция getCSSCustomProp

Мне нужно было посмотреть, поддерживается ли Scroll Snap в моем компоненте JavaScript. Потом я понял, что CSS может предоставить решение для этого вопроса.

Я установил значение по умолчанию для компонента следующим образом:

.my-component

Потом, используя @supports , можно сделать следующее:

@supports (scroll-snap-type: x mandatory) < .my-component < --supports-scroll-snap: 1; >>

Затем JavaScript обрабатывает полученные данные:

const myComponent = document.querySelector('.my-component'); const isSnapSupported = getCSSCustomProp('--supports-scroll-snap', myComponent, 'boolean');

Все это работает благодаря приведенной ниже функции:

/** * Передаем элемент и его пользовательские свойства, значение которого нам необходимо. * Мы можем определить, какой тип данных получим в итоге. * * @param propKey * @param element=document.documentElement * @param castAs='string' * @returns */ const getCSSCustomProp = (propKey, element = document.documentElement, castAs = 'string') => < let response = getComputedStyle(element).getPropertyValue(propKey); // Если нужно, приводим в порядок строку if (response.length) < response = response.replace(/"/g, '').trim(); >// Преобразуем возвращаемые данные в любой желаемый тип switch (castAs) < case 'number': case 'int': return parseInt(response, 10); case 'float': return parseFloat(response, 10); case 'boolean': case 'bool': return response === 'true' || response === '1'; >// Возвращаем результат return response; >;

Заключение

Этот метод отличается от того, что я использовал для точек остановки в body . Основное отличие состоит в том, что мы передаем реальные свойства, а не скрываем значения. Так код стал намного чище.

Можете взять эту функцию из Gist, и, надеюсь, когда-нибудь она вам пригодится.

Как добавить css свойство в js

Для того, чтобы добавить CSS свойство в JS нам на помощь могут прийти следующие возможности:

Обратиться через свойство style:
const divContainer = document.getElementById("container"); // находим элемент в DOM - дереве divContainer.style.backgroundColor = "blue"; // устанавливаем цвет фона элемента на цвет blue 

а еще можно делать так:

divContainer.style["background-color"] = "yellow"; // устанавливаем цвет фона на yellow 

Кстати, свойство можно не только задать, но и удалить. Для этого достаточно присвоить пустую строку:

divContainer.style.backgroundColor = ''; 
Обратиться к элементу через метод setProperty():
divContainer.style.setProperty("background-color", "green"); 
Установить атрибут и свойство целиком с помощью метода setAttribute():
const divContainer = document.getElementById("container"); divContainer.setAttribute("style", "background-color: lightgray"); 
Документация:
  • Свойство style
  • Метод setProperty()
  • Метод setAttribute()

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *