Псевдо-элементы CSS очень мощные и часто используются для создания подсказков CSS-треугольника. Использование псевдо-элементов CSS может достичь некоторых простых эффектов без необходимости добавления дополнительных тегов HTML. Одно можно сказать, что JavaScript не может получить эти значения атрибутов CSS, но теперь есть способ получить:
Посмотрите на следующий код CSS:
.ELEMENT: до {Content: 'new'; Цвет: rgb (255, 0, 0);}. Элемент: до {content: 'new'; color: rgb (255, 0, 0);}Чтобы получить атрибут цвета .Element: до, вы можете использовать следующий код:
var color = window.getComputedStyle (document.queryselector ('. element'), ': до'). getPropertyValue ('color') var color = window.getComputedStyle (document.queryselector ('. Element'), ': перед'). getPorpertyValue ('color')Передайте псевдоэлемент в качестве второго параметра в метод Window.getComputedStyle, чтобы получить атрибут CSS. Поместите этот код в свой набор функций инструмента. Этот метод будет полезен, поскольку псевдо-элементы поддерживаются все большим количеством браузеров.
Примечание переводчика: метод window.getComputedStyle не поддерживается в браузерах ниже IE9, и GetPropertyValue должен использоваться с помощью метода GetComputedStyle. IE поддерживает атрибут CurrentStyle, но он все еще не может получить свойства псевдоэлемента.
Метод, чтобы точно получить значение атрибута CSS указанного элемента.
<script type = "text/javascript"> function getStyle (elem, name) {// Если свойство существует в стиле [], он был недавно установлен (и является текущим) if (elem.style [name]) {return elem.style [name]; } // В противном случае попробуйте IE else if (elem.currentStyle) {return elem.currentStyle [name]; } // или метод W3C, если он существует, иначе if (document.defaultview && document.defaultview.getComputeDStyle) {// он использует традиционный метод регулярного написания в стиле «текст», а не «TextAlign» name = name.replace (/([az])/g, "-1 $"); name = name.tolowercase (); // Получить объект стиля и получить значение свойства (если оно существует) var s = document.defaultView.getComputEdstyle (elem, ""); return s && s.getpropertyvalue (name); // в противном случае он использует другой браузер} else {return null; }} </script>