В процессе разработки мы часто сталкиваемся с стилем элементов DOM через JS. Есть много методов, таких как: изменение класса элементов DOM. Теперь мы обсуждаем Native JS, чтобы получить стиль CSS стиля DOM, обратите внимание, что это не настройка
Перед началом давайте впервые поговорим о получении всех объектов атрибутов CSS, которые наконец применяются к элементу. Если стиль не установлен в элементе, стиль по умолчанию браузера будет возвращен.
1.Ele.style
При обучении DOM я вижу, что значения стиля элементов получаются через ele.style, но иногда то, что я получаю, не является значениями стиля узла, а пустое значение. Это связано с тем, что ele.style может получить значение стиля, записанное в атрибуте стиля в теге элемента, и не может получить атрибуты стиля, определенные в <style> </style> и загружены через <link href = "css.css">
пример:
var test = document.getElementbyId ("test"); // Получить цветовой тест.style.color узла;2. getComputedStyle ()
getComputedStyle-это значение атрибута CSS, которое может получить все конечные значения атрибута CSS текущего элемента.
Синтаксис выглядит следующим образом:
window.getComputedStyle ("element", "Pseudo-Class");Этот метод принимает два параметра: чтобы получить элемент вычисленного стиля и псевдоэлементную строку (например, «до»). Если псевдоэлементная информация не требуется, второй параметр может быть нулевым. Его также можно использовать через document.defaultview.getComputedStyle ("element", "Pseudo-Class");
пример:
var test = document.getElementbyId ("test"), demo = window.getComputedStyle (тест, null); // Получите цветную демонстрацию.Примечание: Firefox и Safari будут преобразовать цвета в формат RGB. Если в тестовом узле нет стиля, используйте Style.Length, чтобы просмотреть количество стилей по умолчанию браузера. IE6-8 не поддерживает этот метод, требуется следующий метод
3. Ele.currentStyle
CurrentStyle является атрибутом самого браузера IE. Его синтаксис похож на Ele.style. Разница в том, что element.currentStyle возвращает конечное значение атрибута CSS применяемого в настоящее время элемента (включая файл CSS внешней ссылки, атрибут <style>, встроенный в страницу и т. Д.).
Грамматика:
var style = dom.currentstyle;
пример:
var test = document.getElementbyId ("test"), demo = test.currentStyle; // Получить цвет демо. Колора узла;Примечание: для полной границы атрибута и т. Д., То есть возвращает неопределенные. Некоторые другие браузеры возвращают значения, а некоторые не возвращаются, но атрибуты, такие как BorderleftWidth возвращающие значения.
4. getPropertyValue ()
GetPropertyValue Получает прямое название свойства стиля CSS
Синтаксис выглядит следующим образом:
window.getComputedStyle (element, null) .getPropertyValue (свойство)
пример:
var test = document.getElementbyId ('test'); window.getComputedStyle (тест, null) .getPropertyValue («Фоно-цвета»);Примечание. Имя атрибута не поддерживает формат верблюда, IE6-8 не поддерживает этот метод, поэтому требуется следующий метод
5. Getattribute
Getattribute аналогичен GetPropertyValue, одно отличие - это формат верблюда имени свойства
пример:
var test = document.getElementbyId ('test'); window.getComputedStyle (тест, null) .getPropertyValue ("founalColor");Примечание : этот метод поддерживает только IE6-8
краткое содержание:
Метод jQuery CSS (), базовая операция использует методы GetComputedStyle и GetPropertyValue. Когда мы используем Native JS Development, мы можем получить значение элемента с помощью вышеуказанных методов.
Ниже приведен метод, который совместим с IE, Firefox, Chrome и другими браузерами для получения стилей элементов, которые можно применить к проекту
функция getStyle (ele) {var style = null; if (window.getComputedStyle) {style = window.getComputedStyle (ele, null); } else {style = ele.currentStyle; } return Style;}Приведенный выше простой способ получить стили элементов в Native JS - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.