如何临时修改元素的CSS

Question

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

我后来与$('#any-el').css('outline', '')删除该样式。

我不想打扰这个元素可能有的任何其他样式，而且我发现这种方法对于添加了外部或内联样式表的CSS很有效，但它会（显然）修改并删除任何'大纲“在任何以前的点通过JavaScript添加。

是什么，以确保“纲要”的风格属性的值恢复到它以前我修改了它的方式，最好的方式？

这里是代码的整个相关部分：（基本上#mask覆盖整个页面和我概述该鼠标悬停，掩模下方的元件）

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

Answer 1

你可以做的最简单的事情就是将你的新样式放在一个类中，并添加/删除这个类，而不是设置内联样式。确保课堂中的每个款式都是!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>

，你可以做补充的风格和还原它们不受任何干扰将是把你的新样式类，并添加最简单的事情/删除类，而不是设置内嵌样式。

Answer 2

你可以在一个变量前面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); 
    });