如何将javascript设置样式属性返回到CSS默认

我试图弄清楚如何使用javascript更改样式属性后，我可以还原为样式表（包括单位）中的值。如何将javascript设置样式属性返回到CSS默认

在下面的示例中，我希望输出为100px（CSS中的值），而不是10px，如getComputedStyle所示。

我也会保留在top:25px的虚拟股利，所以删除style财产将无法正常工作。

我拥有的最好的方法是克隆节点并读取高度并存储在属性中（http://jsfiddle.net/daneastwell/zHMvh/4/），但这并不真正获得浏览器的默认css值（尤其是如果在em中设置的话）。

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>

来源

2012-05-22 Dan Eastwell

为什么你不能使用CSS类？然后，您只需添加/删除它们而不是更改个别样式属性。 –

此外，实际上left_is_10px的当前值是因为getComputerStyle返回该元素的计算样式（包括style属性），而不仅仅是CSS中指定的规则。注意：请注意，旧版本的IE不支持getComputedStyle。 –

我正在执行调整任务的任务，因此计算'左'值，所以班级不会帮助，对不起，没有更具体。 –

只是清除你想退回到原来的样式表内联样式。

elem.style.left = null;

来源

2012-05-22 09:15:02 abaelter

究竟需要什么，才能将样式恢复为CSS值。 –

我将它设置为''''（空字符串）以与JavaScript给出的返回值一致。 – 10basetom

结合abaelter答案，并http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/为我们提供了以下功能：

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

配售您的示例代码和测试：

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

给我们getCssStyle: 100px让你看到原来的CSS值。如果您只想恢复该值，请按照abaelter的说法和要恢复的CSS值执行。

来源

2012-05-22 17:57:50

太好了，如果你只需要知道CSS中的值而不改变元素的状态，这将会很有用。由于我需要恢复到CSS值，@ abaelter的回应是我将使用的。 –

是的，我意识到，我写了功能后，但认为它可能是有用的。 –

的style object有一个内置removeProperty()方法，所以你可以这样做：

elem.style.removeProperty('left');

据我所知，这将有完全一样的属性设置为null同样的效果，如abaelter suggested 。为了完整性，我认为这可能是值得的。

来源

2014-11-30 23:08:03 DoctorDestructo

看起来不错 - 在支持http://www.quirksmode.org/dom/w3c_css.html#t45方面，似乎是IE9。 –

如何将javascript设置样式属性返回到CSS默认

回答

相关问题