Come restituire una proprietà di stile set javascript ai valori predefiniti CSS

Question

Sto cercando di capire come, dopo aver modificato le proprietà di stile con javascript, posso ripristinare il valore nel foglio di stile (comprese le unità).

Nell'esempio seguente, mi piacerebbe che l'output legga 100px (il valore nel CSS), anziché 10px, come indicato da getComputedStyle.

Conserverei anche il dummy div allo top:25px, pertanto la rimozione della proprietà style non funzionerà.

Il meglio che ho è la clonazione del nodo e la lettura dell'altezza e la memorizzazione in una proprietà (http://jsfiddle.net/daneastwell/zHMvh/4/), ma questo non è davvero ottenere il valore css predefinito del browser (soprattutto se questo è impostato in em s).

http://jsfiddle.net/daneastwell/zHMvh/1/

<style> 
#elem-container{ 
    position: absolute; 
    left:  100px; 
    top:  200px; 
    height: 100px; 
} 
</style> 

<div id="elem-container">dummy</div> 
<div id="output"></div> 

<script> 
    function getTheStyle(){ 
    var elem = document.getElementById("elem-container"); 
    elem.style.left = "10px"; 
    elem.style.top = "25px"; 
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("left"); 
    document.getElementById("output").innerHTML = theCSSprop; 
    } 
    getTheStyle(); 
</script> 

Answer 1

Basta cancellare lo stile in linea che si desidera fallback al foglio di stile originale su.

elem.style.left = null; 

Answer 2

Combinando la risposta di abaelter e http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ ci dà la seguente funzione:

var getCssStyle = function(elementId, cssProperty) { 
    var elem = document.getElementById(elementId); 
    var inlineCssValue = elem.style[cssProperty]; 

    // If the inline style exists remove it, so we have access to the original CSS 
    if (inlineCssValue !== "") { 
    elem.style[cssProperty] = null; 
    } 

    var cssValue = ""; 
    // For most browsers 
    if (document.defaultView && document.defaultView.getComputedStyle) { 
    cssValue = document.defaultView.getComputedStyle(elem, "").getPropertyValue(cssProperty); 
    } 
    // For IE except 5 
    else if (elem.currentStyle){ 
    cssProperty = cssProperty.replace(/\-(\w)/g, function (strMatch, p1) { 
     return p1.toUpperCase(); 
    }); 
    cssValue = elem.currentStyle[cssProperty]; 
    } 

    // Put the inline style back if it had one originally 
    if (inlineCssValue !== "") { 
    elem.style[cssProperty] = inlineCssValue; 
    } 

    return cssValue; 
} 

Collocamento nel codice di esempio e test:

console.log("getCssStyle: " + getCssStyle("elem-container", "left")); 

ci dà getCssStyle: 100px che consente di vedere il CSS originale valore. Se si desidera semplicemente ripristinare il valore, fare come dice abaelter e null il valore CSS che si desidera ripristinare.

Answer 3

Il style object ha un built-in removeProperty() metodo, così si potrebbe fare qualcosa di simile:

elem.style.removeProperty('left'); 

Per quanto ne so, questo avrà esattamente lo stesso effetto di impostare la proprietà a null, come abaelter suggested . Ho pensato che valesse la pena includerlo per completezza.