使用 javascript 将样式值重置为先前的声明答案

【问题标题】：Resetting style values to previous declaration using javascript使用 javascript 将样式值重置为先前的声明
【发布时间】：2012-04-20 17:53:40
【问题描述】：

考虑以下

<style type ='text/css'>
   .c1
   {
        opacity:0.3;
   }
</style>

和

<div class = 'c1' id = 'myDiv'></div>

和

<script>
   function cssFn()
   {
       document.getElementById('myDiv').style.opacity = 0.8;
   }
   cssFn();

</script>

因此，我使用 javascript 更改了元素的不透明度。我的问题是这个。是否可以使用 javascript 完成样式声明处于非活动状态并且在类中声明为使用 javascript 处于活动状态..我不需要

document.getElementById('myDiv').style.opacity = 0.3;

我只需要一个将样式重置为使用样式表声明的代码

【问题讨论】：

【解决方案1】：

我不知道这是否可以轻松完成。更改 javascript 中的样式会在元素上创建内联样式...所以<div style="opacity: 0.3; "> 您可以删除该属性，或者您可以!important 进行所有操作（不要执行后者）。然而，这两种解决方案都是 hacky。

或者正如其他问题中所建议的那样，您可以将属性设置为“”。这将否定规则并采用样式表规则。

【讨论】：

【解决方案2】：

您可以尝试使用 2 个不同的类。

<style type="text/css">
  .c1 {
   opacity: 0.3;
  }
  .c2 {
   opacity: 0.8;
  }
</style>

你可以用 javascript 做：

 document.getElementByID("myDiv").className = "c1";

或者使用 jQuery ：

$("#myDiv").addClass("c1");

【讨论】：

不...这不是我需要的...我只需要使用 javascript inactive 和其他声明进行声明，包括 inline,id(ex:#myDivin style),tag(ex: in style) 是活动的，而不是使用 javascript 的先前声明...实际问题是这样的：我创建了一个 fadeIn 函数，它使用 css3 执行淡入效果...在显示效果后我需要更改不透明度回到原来的......

【解决方案3】：

将您想要通过 Javascript 动态添加或删除的样式放在一个单独的类中，然后在需要时使用 Javascript 或 jQuery 添加/删除该类。

因此，与 Andredseixas 开始时的思路相同：

<style type ='text/css'>
   .c1
   {
     opacity:0.3;
   }
   .c2
   {
     opacity:0.3;
   }
</style>

在您的函数 cssFn 中，使用 jQuery - 这样做而不是通过属性手动更改不透明度：

$("myDiv").addClass("c2");

然后，在完成淡入逻辑后使用 jQuery：

$("#myDiv").removeClass("c2");

【讨论】：