getComputedStyle() e cssText in IE e Firefox

Fare riferimento a this fiddle che illustra il problema.getComputedStyle() e cssText in IE e Firefox

Sto cercando di ottenere la proprietà di un cssText<div> via window.getComputedStyle(element) (which returns a CSSStyleDeclaration object). Funziona perfettamente in Chrome (versione appena uscita dai repository), ma non funziona in Firefox, IE10 e IE11. In realtà, cssText è una proprietà sull'oggetto restituito, è solo una stringa vuota.

Potrebbe non funzionare nelle versioni precedenti di IE ma non l'ho provato in quelle versioni. Non riesco a trovare alcun riferimento a questo in particolare non funziona nelle versioni recenti di IE. In realtà Microsoft's documentation mi ha portato a credere che DOVREBBE funzionare quando in realtà non lo fa ("Imposta o recupera la rappresentazione persistente della regola di stile"). Sto provando una piccola anatra di gomma per eseguire il debug qui per vedere se c'è qualcosa di ovvio che ho perso, o forse è il VM images che sto usando per testare il codice su IE. Che cosa sto facendo di sbagliato? Grazie!

EDIT: Quello che sto cercando in particolare è un modo per ottenere un elenco di stili corrente applicata ad un elemento, come accade quando ottenere cssText dall'oggetto restituito da getComputedStyle() in Chrome, ma che non avviene in Firefox o IE. Per chiarire, appare usando la proprietà style.cssText di un elemento in IE recupera un elenco di stili applicati a un elemento tramite fogli di stile, tag di stile e regole di stile inline, ma NON stili che sono stati applicati programmaticamente tramite script. Questo può essere dovuto alla progettazione e come previsto, ma: Come posso replicare il comportamento visto quando si utilizza cssText da un oggetto CSSStyleDeclaration in Chrome (come restituito da getComputedStyle()), ma in Internet Explorer e Firefox?

fonte

2014-11-11 L0j1k

Quindi stai dicendo che 'di proprietà cssText' dell'oggetto CSSStyleDeclaration restituito da' getComputedStyle() 'offre solo gli stili che sono state applicate a causa di fogli di stile e tag di stile, ma non per script di esempio che cambiano dell'elemento stile? Posso salire a bordo con quello. Tuttavia, l'uso di 'element.style.cssText' non mi dà dati reali (cioè è ancora una stringa vuota) quando provo a recuperare gli stili correnti applicati a un elemento. Come posso replicare questo comportamento desiderato in IE, cioè ottenere una stringa contenente tutti gli stili attualmente applicati, indipendentemente dalla loro origine? – L0j1k

In realtà, se quello che hai descritto su 'getComputedStyle()' fosse vero, IE dovrebbe mettere SOMETHING all'interno del div 'fooText' nel fiddle che ho linkato nella mia domanda, ma non è questo il caso. La proprietà 'cssText' non contiene dati, inclusi gli stili applicati tramite il foglio di stile, a meno che non mi sbagli sul modo in cui JSFiddle include gli stili. – L0j1k

Vedo risposte vuote sia per Firefox che per IE. Puoi ricontrollare Firefox, @ Loj1k? [Ho creato anche un test] (http://jsfiddle.net/jonathansampson/008hmbLu/show/), ma non trovo che Firefox passi. – Sampson

Dovresti essere in grado di utilizzare node.currentStyle per accedere a proprietà di stile specifiche che sono molto più affidabili di cssText.

http://msdn.microsoft.com/en-us/library/ie/ms535231%28v=vs.85%29.aspx

Avviso in questo esempio cssText non fornisce il colore di sfondo. Non sono sicuro di quando runtimeStyle dovrebbe funzionare, ma non sembra funzionare prima o dopo la manipolazione di JavaScript. Questi sono probabili bug in IE.

Nota: la funzione getComputedCSSText è un attacco rapido a scopo dimostrativo e probabilmente richiede alcune modifiche per l'utilizzo in un ambiente di produzione.

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 

#MyStyle { 

    background-color: #FF00FF; 
    width: 40px; 
    height: 40px; 
} 

</style> 

<script type="text/javascript"> 


getComputedCSSText = function (node) { 
    var s = []; 
    for (var propertyName in node.currentStyle) { 

     if ("string" == typeof(node.currentStyle[propertyName]) && node.currentStyle[propertyName] != "") { 
      s[s.length] = (propertyName.replace(/[A-Z]/g, function(x) { return "-"+(x.toLowerCase())}))+": "+node.currentStyle[propertyName]; 
     } 
    } 

    return s.join('; ') + ";"; 
}; 



MyTest = function() { 

    var node = document.getElementById('MyStyle'); 

    alert("[pre-js] runtimeStyle.width = " +node.runtimeStyle.width); 
    alert("[pre-js] style.cssText = " + node.style.cssText); 
    alert("[pre-js] currentStyle.width = " + node.currentStyle.width); 
    alert("[pre-js] currentStyle.backgroundColor = " + node.currentStyle.backgroundColor); 


    node.style.width="99px"; 

    alert("[post-js] runtimeStyle.width = " +node.runtimeStyle.width); 
    alert("[post-js] style.cssText = " + node.style.cssText); 
    alert("[post-js] currentStyle.width = " + node.currentStyle.width); 
    alert("[post-js] currentStyle.backgroundColor = " + node.currentStyle.backgroundColor); 

    alert("[post-js] getComputedCSSText = " + getComputedCSSText(node)); 
}; 

</script> 

</head> 
<body> 

<h1 id="MyStyle">FooBar!</h1> 
<button onclick="MyTest()">Test</button> 

</body> 
</html>

fonte

2014-11-12 02:46:00

Sembra decisamente - per ora - iterando sulle proprietà dell'oggetto CSSStyleDeclaration restituito da 'getComputedStyle()' (che sembra essere solo un alias della proprietà 'currentStyle' in IE) è l'unico cross-browser affidabile modo per ottenere una lista di stringhe di stili correnti applicate ad un elemento. Grazie per il tuo suggerimento – L0j1k

getComputedStyle() e cssText in IE e Firefox

risposta

Problemi correlati