當我們在使用 jQuery 修改 HTML 元素的樣式時,有時候需要還原為之前的樣式,這時可以使用 jQuery 的css()
方法來實現。
比如我們有一個按鈕,在鼠標懸停時會改變背景顏色:
// HTML
<button id="btn">點擊我</button>
// CSS
#btn:hover {
background-color: red;
}
// jQuery
$('#btn').hover(function() {
$(this).css('background-color', 'blue');
}, function() {
$(this).css('background-color', '');
});
其中,我們在鼠標離開按鈕時使用$(this).css('background-color', '')
將背景顏色還原為空字符串,即去掉之前設置的顏色。
另外,我們也可以事先保存原來的背景顏色,需要還原時再使用:
// HTML
<button id="btn">點擊我</button>
// CSS
#btn:hover {
background-color: red;
}
// jQuery
var btn = $('#btn');
var originalBg = btn.css('background-color');
btn.hover(function() {
$(this).css('background-color', 'blue');
}, function() {
$(this).css('background-color', originalBg);
});
以上就是使用 jQuery 還原為之前樣式的兩種方法,需要根據具體情況選擇合適的方式。
上一篇css彈性內容垂直排列