Os pseudo-elementos do CSS são muito poderosos e são frequentemente usados para criar dicas de triângulo CSS. O uso de pseudo-elementos CSS pode obter alguns efeitos simples sem a necessidade de adicionar tags HTML adicionais. Uma coisa é que o JavaScript não pode obter esses valores de atributo CSS, mas agora existe uma maneira de obter:
Dê uma olhada no seguinte código CSS:
.Element: antes de {content: 'new'; Cor: RGB (255, 0, 0);}.Para obter o atributo de cor do .Element: antes, você pode usar o seguinte código:
var color = window.getComputedStyle (document.QuerySelector ('.Passe o elemento pseudo-elemento como o segundo parâmetro para o método Window.GetComputedStyle para obter seu atributo CSS. Coloque este código no seu conjunto de funções de ferramenta. Esse método será útil, pois os pseudo-elementos são suportados por mais e mais navegadores.
Nota do tradutor: o método Window.GetComputedStyle não é suportado nos navegadores abaixo do IE9, e GetPropertyValue deve ser usado com o método getComputedStyle. O IE suporta o atributo CurrentStyle, mas ainda não pode obter as propriedades do elemento pseudo-elemento.
Método para obter com precisão o valor do atributo CSS do elemento especificado.
<script type = "text/javascript"> function getStyle (elem, nome) {// se a propriedade existir em estilo [], ela foi definida recentemente (e é a atual) se (elem.style [nome]) {return elem.style [nome]; } // Caso contrário, tente ie else if (elem.currentstyle) {return elem.currentstyle [nome]; } // ou o método W3C, se existir else if (document.defaultView && document.defaultView.getComputedStyle) {// ele usa o método de escrita regular do estilo "text-align" name = name.tolowerCase (); // Obtenha o objeto de estilo e obtenha o valor da propriedade (se existir) var s = document.defaultView.getComputedStyle (elem, ""); return s && s.getPropertyValue (nome); // Caso contrário, ele está usando outro navegador} else {return null; }} </script>