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

Question

考虑以下

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

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

声明的样式

Answer 1

我不知道这是否可以轻松完成。在javascript中更改样式会在元素上创建内联样式...所以<div style="opacity: 0.3; ">可以删除属性，或者!important可以{{1}}所有内容（不要执行后者）。然而，任何一种解决方案都是黑客。

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

Answer 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");

Answer 3

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

所以，和Andredseixas开始的一样：

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

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

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

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

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