如何将JavaScript设置样式属性返回到CSS默认值 [英] How to return a javascript set style property to CSS default
问题描述
我想通过javascript更改样式属性后,可以恢复到样式表中的值(包括单位)。下面的示例,我想输出读取 100px
(CSS中的值),而不是 10px
,因为 getComputedStyle
给出。
我还会将虚拟div保留在顶部: 25px
,所以删除样式
属性将无法正常工作。
最好的已经克隆了节点并读取高度并存储在一个属性中( http://jsfiddle.net/daneastwell / zHMvh / 4 / ),但这并不是真正得到浏览器的默认css值(特别是如果这在 em
中设置)。
http://jsfiddle.net/daneastwell/zHMvh/1 /
< style>
#elem-container {
position:absolute;
左:100px;
顶部:200px;
height:100px;
}
< / style>
< div id =elem-container> dummy< / div>
< div id =output>< / div>
< script>
函数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>
只需清除您希望回到原始的内联样式样式表。
elem.style.left = null;
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).
In the example below, I'd like the output to read 100px
(the value in the CSS), rather than 10px
, as getComputedStyle
gives.
I'd also keep the dummy div at top:25px
, so removing the style
property won't work.
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 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>
Just clear the inline style you wish to fallback to original stylesheet on.
elem.style.left = null;
这篇关于如何将JavaScript设置样式属性返回到CSS默认值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!