如何臨時修改元素的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); 
    });