javascript - 使用 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;

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

你可以用 javascript 做：

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

或者使用 jQuery ：

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

score 0 · Accepted Answer

将要通过 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");

3 回答 3