краткое содержание:
В процессе разработки мы часто сталкиваемся с стилем элементов 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");
// Получить цвет узла
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);
// Получить цвет узла
Демо .color
Примечание: 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;
// Получить цвет узла
Demo.color;
Примечание: для полной границы атрибута и т. Д., То есть возвращает неопределенные. Некоторые другие браузеры возвращают значения, а некоторые не возвращаются, но атрибуты, такие как 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);
}еще{
style = ele.currentStyle;
}
Стиль возвращения;
}