如何将 javascript 设置样式属性返回到 CSS 默认值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10698942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to return a javascript set style property to CSS default
提问by Dan Eastwell
I'm trying to work out how, after changing style properties with javascript, I can revert to the value in the stylesheet (including the units).
我正在尝试弄清楚，在使用 javascript 更改样式属性后，如何恢复到样式表中的值（包括单位）。
In the example below, I'd like the output to read 100px(the value in the CSS), rather than 10px, as getComputedStylegives.
在下面的示例中，我希望输出读取100px（CSS 中的值），而不是10px, getComputedStyle。
I'd also keep the dummy div at top:25px, so removing the styleproperty won't work.
我还将虚拟 div 保留在top:25px，因此删除该style属性将不起作用。
The best I have is cloning the node and reading the height and storing in a property (http://jsfiddle.net/daneastwell/zHMvh/4/), but this is not really getting the browser's default css value (especially if this is set in ems).
我所拥有的最好的是克隆节点并读取高度并存储在属性中（http://jsfiddle.net/daneastwell/zHMvh/4/），但这并没有真正获得浏览器的默认 css 值（特别是如果这是设置在ems)。
http://jsfiddle.net/daneastwell/zHMvh/1/
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>
回答by abaelter
Just clear the inline style you wish to fallback to original stylesheet on.
只需清除您希望回退到原始样式表的内联样式即可。
elem.style.left = null;
回答by DoctorDestructo
The style objecthas a built-in removeProperty()method, so you could do something like:
该样式对象有一个内置的removeProperty()方法，所以你可以这样做：
elem.style.removeProperty('left');
As far as I know, this will have exactly the same effect as setting the property to null, as abaelter suggested. I just thought it might be worth including for the sake of completeness.
据我所知，这与将属性设置为 具有完全相同的效果null，正如abaelter 建议的那样。我只是认为为了完整起见可能值得包括在内。
回答by wm.wragg
Combining abaelter's answer and http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/gives us the below function:
结合 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;
}
Placing in your example code and testing:
放入示例代码并进行测试：
console.log("getCssStyle: " + getCssStyle("elem-container", "left"));
Gives us getCssStyle: 100pxallowing you to see the original CSS value. If you just want to revert the value then do as abaelter says and nullthe CSS value you want to revert.
getCssStyle: 100px让我们可以让您看到原始的 CSS 值。如果您只想恢复该值，请按照 abaelter 所说的和null要恢复的 CSS 值进行操作。
