Question

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

我稍后使用$('#any-el').css('outline', '')删除了该样式。

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

确保'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覆盖整个页面，我勾勒出鼠标悬停在面具下方的元素。）

Answer 1

您可以在更改变量之前将先前outline样式的值存储在变量中，然后再恢复该变量的值。 E.g。

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

Answer 2

添加样式并在不受干扰的情况下恢复它们最简单的方法是将新样式放在类中并添加/删除该类而不是设置内联样式。确保每个样式都在课程中!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>

添加样式并在不受干扰的情况下恢复它们最简单的方法是将新样式放在类中并添加/删除该类而不是设置内联样式。

如何临时修改元素的CSS

2 个答案: