當按鈕被點擊時更改背景css模糊？

Question

單擊button時如何將屬性filter: blur(2px);添加到body？並點擊關閉按鈕時，從body刪除該屬性？乾杯

Answer 1

您可以使用css()任何CSS屬性添加到選定的項目

$('#button').click(function(){ 
    $('body').css("filter", "blur(2px)"); 
}); 

要刪除的CSS屬性

$('#button').click(function(){ 
    $('body').css("filter", ""); 
}); 

注：#button是按鈕的ID。

文檔：http://api.jquery.com/css/

Answer 2

我覺得你想這樣的：

在按鈕點擊：

$("#btnid").click(function(){ 
    $('body').css("filter","blur(2px)"); 
}); 

要刪除：

$("#closebtnid").click(function(){ 
     $('body').css("filter",""); 
    }); 

css() method

Answer 3

在CSS創建2個類 - 一個模糊，一個沒有。

在的Javascript創建2個功能 - 1 的onclick爲模糊按鈕和1 的onclick關閉按鈕。這些功能應改變機體的類別。

$('.button').click(function(){ 
    $('body').addClass('blur'); 
}); 

Answer 4

實際上最好添加或刪除一個類而不是使用.css（）。首先，它將業務邏輯中的樣式分開（易於維護）。另外addClass()比css()方法更快。

CSS

.blurfilter{ 
     /*your blur filter styles here*/ 
    } 

jQuery的

$('.blurbutton').on('click', function(){ 
    $('body').addClass('blurfilter'); 
}); 

$('.unblurbutton').on('click', function(){ 
    $('body').removeClass('blurfilter'); 
}); 

//you also could toggle the class with one button 
$('.togglebutton').on('click', function(){ 
    $('body').toggleClass('blurfilter'); 
});