Los pseudo-elementos CSS son muy potentes y a menudo se usan para crear sugerencias de triángulos CSS. El uso de pseudo-elementos CSS puede lograr algunos efectos simples sin la necesidad de agregar etiquetas HTML adicionales. Una cosa es que JavaScript no puede obtener estos valores de atributos CSS, pero ahora hay una manera de obtener:
Eche un vistazo al siguiente código CSS:
.element: antes {contenido: 'nuevo'; Color: RGB (255, 0, 0);}. Elemento: antes {contenido: 'nuevo'; color: rgb (255, 0, 0);}Para obtener el atributo de color de .Element: Antes, puede usar el siguiente código:
var color = window.getComputedStyle (document.querySelector ('. Element'), ': antes'). GetPropertyValue ('color') var color = window.getComputedStyle (document.querySelector ('. Element'), ': antes'). GetPropertyValue ('color')Pase el pseudoelemento como el segundo parámetro a la ventana. GetComputedStyle Método para obtener su atributo CSS. Coloque este código en el conjunto de funciones de su herramienta. Este método será útil ya que los pseudo-elementos son compatibles con más y más navegadores.
Nota del traductor: el método Window.getComputedStyle no es compatible con los navegadores debajo de IE9, y GetPropertyValue debe usarse con el método GetComputedStyle. IE admite el atributo CurrentStyle, pero aún no puede obtener las propiedades del pseudoelemento.
Método para obtener con precisión el valor del atributo CSS del elemento especificado.
<script type = "text/javaScript"> function getStyle (elem, name) {// Si la propiedad existe en estilo [], se ha establecido recientemente (y es el actual) if (elem.style [name]) {return elem.style [name]; } // de lo contrario, intente es decir, más if (elem.currentStyle) {return elem.CurrentStyle [name]; } // o el método W3C, si existe más if (document.defaultview && document.defaultview.getComputedStyle) {// usa el método tradicional de escritura regular de estilo "text-align", en lugar de "textalign" name = name.replace (/(AZ])/g,-$ 1 "); name = name.tOlowerCase (); // Obtenga el objeto de estilo y obtenga el valor de la propiedad (si existe) var s = document.defaultView.getComputedStyle (elem, ""); return s && s.getPropertyValue (nombre); // de lo contrario, está usando otro navegador} else {return null; }} </script>