Problema de Firefox con currentStyle frente a getComputedStyle

Question

Estoy tratando de obtener el ancho de un elemento según sus reglas CSS El problema es que "getComputedStyle" devuelve un valor de píxel en lugar de "auto" para un elemento sin valor de ancho de CSS. En Opera, "elem.currentStyle ['width']" devuelve "auto", pero en firefox, debe usar "getComputedStyle" que devuelve algo así como "1149px".

Para mí es vital saber cuál es la regla de CSS real. ¿Hay alguna forma de hacer esto además de getComputedStyle? The Firefox MDN deja en claro que "getComputedStyle" no es el camino a seguir, pero no puedo encontrar ninguna documentación para un equivalente de Firefox a "currentStyle".

Si desea saber, mi objetivo final es encontrar el elemento de ancho estático más grande en la página. Si no puedo leer los valores de la hoja de estilo, solo valores representados/calculados, , ¿cómo puedo lograr esto?

Answer 1

Si comienza con un elemento, no hay forma de saber qué reglas de hoja de estilo le aplicaron. getComputedStyle() simplemente le da el valor de estilo efectivo y currentStyle no es muy diferente, aunque le da el resultado que espera en este escenario particular y este navegador en particular.

Lo que probablemente necesite hacer es ir a través de las hojas de estilo en su lugar. A lo largo de las líneas de:

for (var i = 0; i < document.styleSheets.length; i++) 
{ 
    var styleSheet = document.styleSheets[i]; 
    for (var j = 0; j < styleSheet.cssRules.length; j++) 
    { 
    var rule = styleSheet.cssRules[j]; 
    if (rule.type == 1) // STYLE_RULE 
    { 
     // Do something with rule.style.width 
    } 
    } 
} 

Si este caso es necesario para localizar elementos de coincidencia de esa regla se puede utilizar con document.querySelectorAll()rule.selectorText. El problema restante es que varias reglas de estilo pueden aplicarse al mismo elemento y se debe calcular la especificidad de la regla. Sin embargo, no estoy seguro de cuánto es un problema para usted.

documentación adicional:

• CSSStyleSheet
• CSSStyleRule

Answer 2

si lo que desea obtener la dimensión del elemento, por qué no usar

element.clientWidth o element.clientHeight

la getcomputestyle no está diseñado para recuperar la anchura o la altura del elemento de

Answer 3

Por desgracia, en lo que a Sé que no hay una forma realista de lograr esto.

Editar: La respuesta anterior que recorre las hojas de estilo es su mejor opción. Originalmente pensé en acceder a las hojas de estilo pero no pensé en usar querySelectorAll. Felicitaciones a Wladimir por una genial solución.

-

La única solución que se me ocurrió es que los elementos que está configurando una anchura de, también establecer algún otro estilo utilizado con poca frecuencia a algo que no va a afectar realmente nada, para que pueda probar para eso.

div { 
    width: 35px; 
    min-width: 1px; /* the flag */ 
    } 

Así que la hora de buscar los elementos con un ancho especificado, se puede buscar [ComputedStyle] .minWidth == '1 píxel' primero.

Bastante una solución hacky pero hará el trabajo bien.

También podría establecer un nombre de clase aleatorio para los elementos que tienen un ancho establecido, entonces todo lo que tendría que hacer es consultar los elementos con ese nombre de clase. Aunque no es una solución muy dinámica.