¿Cómo obtener y extraer reglas CSS coincidentes en el nodo DOM?

Question

Me gustaría saber una manera fácil de obtener todas las reglas y clases de CSS en un determinado nodo DOM y el subárbol mediante programación.

Herramientas de desarrollo cromado

Inspeccionar el estilo de un elemento en las herramientas de desarrollo cromado devuelve 2 paneles

1. Estilo calculado
2. Estilos

El panel Styles tiene 3 categorías de estilo diferentes:

• Elemento de estilo
• Reglas de CSS coincidentes
• heredado de ....

La función window.getMatchedCSSRules Se acerca bastante a las reglas de CSS coincidentes en el panel en las tooles de desarrollo. Quiero iterar sobre un elemento y sus hijos y agregar las reglas CSS coincidentes a una cadena.

Este violín actualizado explica y demuestra el resultado esperado y no deseado

Ejemplo:

<a class="one to many">
    <span class="even more">foo</span>
    <span class="way muchMore"> bar</span>
</a>

¿Cómo puedo obtener todas las clases CSS con las estilerules como esta?

a.one { color: red; }
.to { margin: 2em}

Y así. La siguiente función se acerca bastante al resultado esperado:

// el = a DOM-Node document.getElementById(id);
function getCssText(el) {
    var cssText = "";
    var cssRuleList = window.getMatchedCSSRules(el, '');
    for (var i = 0; i < cssRuleList.length; i++) {
        cssText += cssRuleList[i].cssText + " ";
    }
    return cssText;
}

Alexander señaló esto Discusión sobre Window.getMatchedCSSrules () Regresando nulo

¿Alguien tiene un complemento o una función más sofisticada para que recupere las clases CSS y los valores de un domnodo?

Answer 1

Lo que le impide que la seleccione y la copia del mouse (CTRL-C, lo que sea) el contenido de la sección "Reglas CSS coincidentes" o "Estilos calculados" en la barra lateral (¿me estoy perdiendo la tarea que está tratando de resolver?)

Existe un problema conocido con la pegación de los contenidos copiados en editores de texto conocidos de HTML (las reglas de propiedades CSS Inside se representan como una lista numerada, que en realidad es un error en los editores respectivos) pero de lo contrario, si desea obtener manualmente Una copia de todas sus reglas CSS combinadas/estilo calculado para un elemento DOM, este flujo de trabajo debería funcionar para usted.

Edición de terceros

En el comentario a continuación se recomienda usar window.getMatchedCSSRules(). Usarlo en Chrome 62 devuelve esto

VM1395: 1 [Depreción] 'GetMatchedCSSrules ()' está en desuso. Para obtener más ayuda, verifique https://code.google.com/p/chromium/issues/detail?id=437569#c2

los La discusión GetMatchedCSSrules se inició en noviembre de 2014 y contiene este bit getMatchedCSSRules is non-standard and likely to be removed in the coming months. Relying on it is bad for cross-browser interop since major browsers like Firefox and IE won't be supported. Parece que M63 comenzará a eliminarlo.

Una alternativa podría ser usar Modelo de objetos CSS (CSSOM)

Answer 2

En la pestaña 'Elementos' de las herramientas de desarrollo en Chrome, si selecciona algún nodo en particular, muestra todas las reglas de estilo coincidentes en el panel a la derecha (tanto reglas coincidentes individualmente como un estilo calculado general para el nodo).