Problema di Firefox con currentStyle vs getComputedStyle

Question

Sto cercando di ottenere la larghezza di un elemento in base alle sue regole CSS Il problema è che "getComputedStyle" restituisce un valore di pixel invece di "auto" per un elemento senza valore di larghezza CSS impostato. In Opera, "elem.currentStyle ['width']" restituisce "auto", ma in firefox, deve usare "getComputedStyle" che restituisce qualcosa come "1149px".

È fondamentale per me sapere qual è la regola CSS effettiva. C'è un modo per farlo oltre a getComputedStyle? The Firefox MDN chiarisce "getComputedStyle" non è la strada da percorrere, ma non riesco a trovare alcuna documentazione per un equivalente di Firefox a "currentStyle".

Se si desidera sapere, il mio obiettivo finale è trovare l'elemento di larghezza statica più grande nella pagina. Se non riesco a leggere i valori del foglio di stile - solo i valori renderizzati/calcolati - come posso ottenere questo risultato?

Answer 1

Se si inizia con un elemento, non è possibile conoscere le regole del foglio di stile applicate. getComputedStyle() fornisce semplicemente il valore di stile effettivo e currentStyle non è molto diverso anche se capita di darti il ​​risultato che ti aspetti in questo particolare scenario e in questo particolare browser.

Quello che probabilmente devi fare è passare attraverso i fogli di stile. Lungo le linee di:

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 
    } 
    } 
} 

Se quindi necessario individuare gli elementi di corrispondenza che regola, è possibile utilizzare document.querySelectorAll() con rule.selectorText. Il problema rimanente è che più regole di stile potrebbero applicarsi allo stesso elemento e la specificità della regola deve essere calcolata. Non sei sicuro di quanto questo sia un problema per te.

Ulteriore documentazione:

• CSSStyleSheet
• CSSStyleRule

Answer 2

se si desidera solo ottenere la dimensione dell'elemento, perché non utilizzare

element.clientWidth o element.clientHeight

il getcomputestyle non è progettato per recuperare la larghezza o l'altezza dell'elemento

Answer 3

Purtroppo, per quanto ne sapere che non esiste un modo realistico per raggiungere questo obiettivo.

Modifica: la risposta precedente che scorre tra i fogli di stile è la soluzione migliore. Inizialmente pensavo di accedere ai fogli di stile, ma non pensavo di usare querySelectorAll. Un saluto affettuoso a Wladimir per una soluzione geniale.

-

L'unica soluzione che ho potuto pensare è per gli elementi che si sta impostando una larghezza a, impostare anche qualche altro stile poco utilizzato a qualcosa che non sarà davvero influenzare qualsiasi cosa, in modo da poter testare per quello.

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

Allora quando alla ricerca di elementi con una larghezza specificata, si può cercare [ComputedStyle] .minWidth == '1px' prima.

Una soluzione molto complessa, ma che farà il suo lavoro.

È inoltre possibile impostare un nome di classe casuale per gli elementi che hanno una larghezza impostata, quindi tutto ciò che si dovrebbe fare è eseguire una ricerca per gli elementi con quel nome di classe. Anche se non è una soluzione molto dinamica.