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 getComputedStyle gives.

在下面的例子中,我希望输出读取100px(CSS中的值),而不是像getComputedStyle给出的10px。

I'd also keep the dummy div at top:25px, so removing the style property won't work.

我还将虚拟div保持在顶部:25px,因此删除样式属性将不起作用。

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>

3 个解决方案

#1


18

Just clear the inline style you wish to fallback to original stylesheet on.

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

elem.style.left = null;

更多相关文章

  1. 对象的属性也要加引号吗
  2. javascript中的属性类型
  3. 为什么通过JavaScript更改样式会受到CSS过渡的影响
  4. 使用gulp-spritesmith属性生成:悬浮规则,而不是类选择器
  5. 从单击使用属性作为变量进行AJAX调用。
  6. 确保代码在*之后执行*对监视属性的更改已在UI中生效
  7. 如何在execCommand formatBlock 'p'标签中添加类或id或CSS样式?
  8. JavaScript 对象属性作实参以及实参对象的callee属性
  9. 使用jackson json将属性添加到json字符串

随机推荐

  1. 动画:二叉树在实际中的应用(下)
  2. 钉钉在线求饶?五星分期付款?爬取钉钉App St
  3. python中那些小众但有用的内置模块
  4. 动画:如何给面试官回答 TCP 的拥塞控制?
  5. python数据分析之清洗数据:缺失值处理
  6. 数据工程师需要掌握的18个python库
  7. 图解 :一篇彻底带你搞懂 JS 中的 this 指
  8. python数据分析——详解python读取数据相
  9. Python一行命令生成数据分析报告
  10. 数据工程师面试必备——Python与数据库的