單擊按鈕時將背景css更改為模糊？

Question

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

Answer 1

我想你想要這個：

點擊按鈕：

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

去除：

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

css（）方法

Answer 2

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

在Javascript中創建2個函數 - 1個onclick用於模糊按鈕，1個onclick用於關閉按鈕。 這些功能應該改變身體的類別。

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

Answer 3

實際上，最好添加或刪除一個類而不是使用.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');
});

Answer 4

您可以使用css()將任何css屬性添加到所選項目

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

刪除css屬性

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

注意： #button是按鈕的id。

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