如何临时修改元素的CSS

How to temporarily modify the CSS of an element

本文关键字：CSS 元素 修改 何临时      更新时间：2023-09-26

我正在使用jQuery向元素添加CSS规则。例如$('#any-el').css('outline', '1px solid red')。

我后来用$('#any-el').css('outline', '')删除了这个样式。

我不想干扰这个元素可能具有的任何其他样式，我发现这个方法适用于添加了外部或内联样式表的CSS，但它会（显然）修改并删除之前通过JavaScript添加的任何"outline"。

确保"outline"样式属性的值恢复到我修改它之前的状态的最佳方法是什么？

以下是代码的全部相关部分：

   var last_el = null
   $('#mask').mousemove(function(e) {
     var mask = $(this).detach()
     var el = window.document.elementFromPoint(e.clientX, e.clientY)
     if (el != last_el) {
       if (last_el) {
         $(last_el).css('outline', '')
       }
       if (el) {
         $(el).css('outline', '1px solid red')
       }
       last_el = el
     }
     $('body').append(mask)
   })

（基本上，#mask覆盖了整个页面，我在掩码下面勾勒出鼠标悬停的元素。）

您可以在更改前将上一个outline样式的值存储在变量中，然后再恢复该变量的值。例如

   var last_el = null;
   var outline_style = null;
   $('#mask').mousemove(function(e) {
     var mask = $(this).detach();
     var el = window.document.elementFromPoint(e.clientX, e.clientY);
     if (el != last_el) {
       if (last_el) {
         $(last_el).css('outline', outline_style);
       }
       if (el) {
         outline_style = $(el).css('outline');
         $(el).css('outline', '1px solid red');
       }
       last_el = el;
     }
     $('body').append(mask);
   });

要添加样式并在不受任何干扰的情况下恢复它们，最简单的方法是将新样式放入一个类并添加/删除该类，而不是设置内联样式。确保类中的所有样式都是!important。

var $span = $('span');
$('button').click(function () {
  var $this = $(this),
      override = $this.text() === 'Override';
  
  $span.toggleClass('outline-override');
  $this.text(override? 'Restore' : 'Override');
});
.outline-override {
    outline: 1px solid red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="outline: 1px solid black;">test</span>
<button>Override</button>

相关文章：