¿Cómo obtener todos los selectores CSS definidos para un elemento DOM dado?

¿Cómo obtener todos los selectores de CSS DEFINIDOS para un elemento de DOM dado usando jQuery?¿Cómo obtener todos los selectores CSS definidos para un elemento DOM dado?

Definido me refiero a todos los selectores de CSS que se utilizan en cualquiera de las hojas de estilo aplicadas al document.

En cierto modo, esto es similar a la característica implementada por FireBug donde muestra todos los selectores CSS aplicados para un elemento DOM seleccionado.

Cualquier ayuda es apreciada.

Fuente

2011-02-27 GeekTantra

Esto suena más razonable ... no sé si es posible el uso de JS/jQuery solos sin embargo. – BoltClock

¿Qué pasa con [su otra pregunta] (http://stackoverflow.com/questions/5135287)? ¿Sigue siendo relevante? – Gumbo

Parece que está intentando encontrar los estilos calculados del elemento, no sus "selectores definidos". –

De este answer es posible que pueda obtener lo que está buscando al pasar por la propiedad cssRules.

var myElement = $("#content"); 
for (var x = 0; x < document.styleSheets.length; x++) { 
    var rules = document.styleSheets[x].cssRules; 
    for (var i = 0; i < rules.length; i++) { 
     if (myElement.is(rules[i].selectorText)) { 
      $("ul").append("<li>" + rules[i].selectorText + "</li>"); 
     } 
    } 
}

Dada la siguiente dom:

<div> 
    <div id="content"> 
    </div> 
</div>

y CSS reglas:

div 
{ 
    background-color:black; 
} 
#content{ 
    height:50px; 
    width:50px; 
} 
div > div 
{ 
    border: solid 1px red; 
}

nos encontraremos con un conjunto de reglas emparejado de:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,fieldset, input, textarea, p, 
blockquote, th, td div 
#content 
div > div

Ejemplo de jsfiddle. No estoy seguro de qué tan bien funcionará para todos los escenarios, pero podría ser algo que ver si se ajusta a sus necesidades.

Actualizado con un poco más completa example ...

$(document).click(function(event) { 
    var rules = GetAppliedCssRules($(event.target)); 
    var $ul = $("#rules").empty(); 
    $.each(rules, function() { 
     $ul.append("<li>" + this + "</li>"); 
    }); 
    event.preventDefault(); 
}); 

function GetAppliedCssRules($element) { 
    var appliedRules = []; 
    for (var x = 0; x < document.styleSheets.length; x++) { 
     var rules = document.styleSheets[x].cssRules; 
     for (var i = 0; i < rules.length; i++) { 
      if ($element.is(rules[i].selectorText)) { 
       appliedRules.push(rules[i].selectorText); 
      } 
     } 
    } 
    return appliedRules; 
}

Fuente

2011-02-27 21:40:45

¿Esto devuelve las reglas aplicadas en el orden de prioridad tal como se aplica en el DOM como lo hace FireBug? – GeekTantra

Esto no le dará la prioridad en la que las reglas se aplicaron solo porque una regla dada en la hoja de estilos coincide con su elemento. Si desea conocer el estilo final de un elemento, puede usar 'getComputedStyle' –

@Mark, ¿sabe cómo ordenar los selectores por prioridad css? Veo firebug lite order por css priority pero no sé cómo lo hicieron. – Codler

Creo que las dos características no son similares.

Además, creo que ni jQuery ni el navegador mantienen el rastro de selectores utilizados a través del código de javascript o archivo de hoja de estilo; los selectores se utilizan para hacer referencia a uno o más elementos DOM, para eventualmente aplicarle estilos.

Por lo tanto, lo que se conserva son los estilos, no los selectores utilizados.

Espero que esto ayude.

Fuente

2011-02-27 21:15:50

¿Cómo obtener todos los selectores CSS definidos para un elemento DOM dado?

Respuesta

Cuestiones relacionadas