23

我正在尝试弄清楚如何在使用 javascript 更改样式属性后恢复为样式表中的值（包括单位）。

在下面的示例中，我希望输出读取100px（CSS 中的值），而不是10px,getComputedStyle给出。

我还将虚拟 div 保留在top:25px，因此删除该style属性将不起作用。

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

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>
4

3 回答 3

30

只需清除您希望回退到原始样式表的内联样式即可。

elem.style.left = null;
于 2012-05-22T09:15:02.610 回答
5

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

elem.style.removeProperty('left');

据我所知，这与将属性设置null为abaelter 建议的效果完全相同。我只是认为为了完整起见可能值得包括在内。

于 2014-11-30T23:08:03.880 回答
1

结合 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 所说的以及null您要恢复的 CSS 值执行操作。

于 2012-05-22T17:57:50.877 回答