javascript - 如何临时修改元素的CSS

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 样式的值存储在一个变量中，然后再恢复该变量的值。例如

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