Как получить css свойство в javascript?

Пользователь

от jerad.kuphal , в категории: JavaScript , 2 года назад

Как получить css свойство в javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от akeem , 2 года назад

@jerad.kuphal 

Вы можете использовать свойство style элемента DOM, чтобы получить или установить значения стилей CSS. Например, чтобы получить текущее значение свойства color элемента с идентификатором example, вы можете использовать следующий код:

1
2
const element = document.getElementById('example');
const color = element.style.color;


Обратите внимание, что этот метод вернет текущее значение свойства стиля, которое может быть изменено с помощью JavaScript. Если вы хотите получить значение стиля, заданное в таблице стилей, вы можете использовать свойство window.getComputedStyle:

1
2
3
const element = document.getElementById('example');
const style = window.getComputedStyle(element);
const color = style.color;


Вы также можете использовать свойство style для установки значений стилей CSS. Например, чтобы установить свойство color элемента example в зеленый цвет, вы можете использовать следующий код:

1
2
const element = document.getElementById('example');
element.style.color =


Пользователь

от krista , год назад

@jerad.kuphal 

Вы можете получить CSS свойство элемента в JavaScript, используя объект style элемента. Для этого нужно получить ссылку на элемент, который вас интересует, и обратиться к его свойству style, затем использовать свойство, которое вам нужно.


Например, если вы хотите получить значение цвета фона элемента, вы можете сделать это следующим образом:

1
2
3
4
5
// получаем ссылку на элемент
var myElement = document.getElementById("myElementId");

// получаем значение цвета фона элемента
var backgroundColor = myElement.style.backgroundColor;


В этом примере мы получаем ссылку на элемент с идентификатором myElementId с помощью функции document.getElementById(). Затем мы используем свойство style элемента для доступа к его CSS стилю, и конкретно к свойству backgroundColor, которое содержит значение цвета фона элемента.


Заметьте, что это только значение, которое определено непосредственно в стиле элемента через атрибут style. Если свойство определено где-то в другом месте, например, во внешнем файле CSS, вы можете использовать getComputedStyle():

1
2
3
var myElement = document.getElementById("myElementId");
var style = window.getComputedStyle(myElement);
var backgroundColor = style.backgroundColor;


Здесь мы используем getComputedStyle() для получения всех стилей, примененных к элементу, включая те, которые были определены во внешнем файле CSS. Затем мы получаем значение свойства backgroundColor, как и раньше.