Базовый код:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> документ </title> <style> div {color: желтый; } </style> </head> <body> <div> Это div </div> </body> </html>1. Получите его, используя атрибут element.style
<script> var div = document.getElementsbytagname ("div") [0]; console.log (div.style.color); // "" console.log (div.style.backgroundcolor); // красный </script>Атрибут element.style может получить только встроенные стили, не может получить стили в теге <style>, а также не может получить внешние стили.
Поскольку element.tyle является атрибутом элемента, мы можем переназначить атрибут, чтобы переопределить отображение элемента.
<script> var div = document.getElementsbytagname ("div") [0]; div.style ['founal-color'] = "green"; console.log (div.style.backgroundcolor); // зеленый </script>2. Получить стили через GetComputeDStyle и CurrentStyle
Среда использования GetComputeDStyle - это Chrome/Safari/Firefox, то есть 9,10,11
<script> var div = document.getElementsbytagname ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.backgroundcolor); // red console.log (styleobj.color); // желтый </script>CurrentStyle может быть идеально поддерживать в IE, Chrome не поддерживает, FF не поддерживает
<script> var div = document.getElementsbytagname ("div") [0]; var styleObj = div.currentStyle; console.log (styleobj.backgroundcolor); // red console.log (styleobj.color); // желтый </script>3. Разница между эле.
3.1Ele.style-это чтение-записка, а GetComputeDStyle и CurrentStyle-только для чтения
3.2 Ele.Style может получить только стиль CSS в свойстве стиля в линии, а GetComputEdstyle и CurrentStyle также могут получить другие значения по умолчанию.
3.3 Что Ele.Style получает стиль в атрибуте стиля, а не обязательно в конечном стиле, в то время как два других получают последний стиль CSS из элемента
4. Получите написание совместимости стиля
<script> // Получить нелинейный стиль (стиль в теге стиля или стиль в файле ссылки CSS), obj-это элемент, ATTR-это функция имени стиля GetStyle (obj, attr) {// for ie if (obj.currentStyle) {return obj.currentStyle [attr]; // Поскольку ATTR, переданный функцией, является строкой, вы должны использовать [], чтобы получить значение} else {// для window window window. }} /* Получить или установить атрибут CSS* / function css (obj, attr, value) {if (arguments.length == 2) {return getStyle (obj, attr); } else {obj.style [attr] = value; }} </script>5.window.getComputedStyle (ele [, pseudoelt]);
Если второй параметр является нулевым или опущенным, получите объект CSSStyleDeclaration, который ele
Если это псевдо-класс, то получается объект CSSStyleDeclaration псевдо-класса
<style> div {ширина: 200px; Высота: 200px; фоновый цвет:#fc9; размер шрифта: 20px; Текст-альбом: Центр; } div: после {content: «Это после»; дисплей: блок; Ширина: 100px; высота: 100px; фоновый цвет:#F93; Поле: 0 Авто; высота линии: 50px; } </style> <body> <div id = 'mydiv'> это div </div> <input id = 'btn' type = "cutting" value = 'getStyle'/> <script> var btn = document.queryselector ('#btn'); btn.onclick = function () {var div = document.queryselector ('#mydiv'); var styleobj = window.getComputedStyle (div, 'после'); console.log (styleobj ['width']); } </script> </body>6. GetPropertyValue Получает указанное значение свойства в объекте CSSstyledeClaration
<script> var div = document.getElementsbytagname ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.getpropertyvalue ("foangy-color")); </script>PropertyName в GetPropertyValue (PropertyName); не может быть верблюжьим выражением
obj.currentStyle ['Margin-Left'] работает
obj.currentStyle ['marginleft'] работает
window.getComputedStyle (obj, null) ['Margin-left'] работает
window.getComputedStyle (obj, null) ['marginleft'] работает
window.getComputedStyle (obj, null) .getPropertyValue ('margin-left') Действительно
window.getComputedStyle (obj, null) .getPropertyValue ('marginleft') недействителен
obj.currentStyle.width действительна
obj.currentStyle.background-Color Invalid
obj.currentstyle.backgroundcolor Works
window.getComputedStyle (obj, null). Всего действительна
window.getComputedStyle (obj, null). Background-Color
window.getComputedStyle (obj, null) .backgroundcolor Works
Таким образом, атрибут с «-» не может быть указан непосредственно, поэтому для его обработки есть метод GetPropertyValue, но [] может использоваться для замены GetPropertyValue.
7. DefaultView
Во многих онлайн -демонстрационных кодах GetComputedStyle вызывается через объект Document.DefaultView. В большинстве случаев это не требуется, так как это можно вызвать непосредственно через окно -объект. Но существует ситуация, когда вы должны использовать DefaultView, который должен получить доступ к стилям внутри подкола на Firefox3.6 (iframe)
Вышеупомянутый метод простой реализации получения стилей (рекомендуется) JS - это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.