Cómo devolver una propiedad de estilo de conjunto de Javascript a CSS predeterminado

Question

Estoy tratando de averiguar cómo, después de cambiar las propiedades de estilo con javascript, puedo volver al valor en la hoja de estilos (incluidas las unidades).

En el ejemplo siguiente, me gustaría que la salida lea 100px (el valor en el CSS), en lugar de 10px, como getComputedStyle da.

También mantendría el dummy div en top:25px, por lo que eliminar la propiedad style no funcionará.

Lo mejor que tengo es clonar el nodo y leer la altura y el almacenamiento en una propiedad (http://jsfiddle.net/daneastwell/zHMvh/4/), pero esto realmente no obtiene el valor predeterminado de css del navegador (especialmente si está establecido en 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

apenas claro el estilo en línea que desea vuelve a los de estilo original en.

elem.style.left = null; 

Answer 2

Combinando la respuesta de abaelter y http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ nos da la siguiente función:

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

colocación en el código de ejemplo y pruebas:

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

Nos da getCssStyle: 100px que le permite ver el original de CSS valor. Si solo desea revertir el valor, haga lo que abaelter dice y null el valor de CSS que desea revertir.

Answer 3

El style object tiene incorporado un removeProperty() método, por lo que podría hacer algo como:

elem.style.removeProperty('left'); 

Por lo que yo sé, esto tendrá exactamente el mismo efecto que establecer la propiedad de null, como abaelter suggested . Solo pensé que podría valer la pena incluirlo en aras de la exhaustividad.