javascript - 如何通过 jquery 附加 -webkit-filter 属性

Question

我编写了以下代码以制作具有 id=sample grayscale(0.6) 和 blur(5px) 的元素。但事实证明，后一个 -webkit-filter 属性替代了前一个属性，而不是附加到它。我每次只能添加一个 -webkit-filter 属性。是否可以将模糊附加到灰度？请明确说明我使用的是最新的 chrome，因此 -webkit-filter 可以在我的导航器上使用。

$('#grayscale').click(function() {
    $('#sample').css({"-webkit-filter" : "grayscale(0.6)"})
});
$('#blur').click(function() {
    $('#sample').css({"-webkit-filter" : "blur(5px)"})
});

Answer 1

您可以添加（或从中删除）现有过滤器。

$('#grayscale').on('click', function() {
    var $sample = $('#sample');
    var new_filter = "grayscale(0.6)"; 
    var old_filter = $sample.css("-webkit-filter");
    if(old_filter.indexOf(new_filter) == -1){
        $sample.css("-webkit-filter", old_filter + ' ' + new_filter);
    }
    else {
        $sample.css("-webkit-filter", old_filter.replace(new_filter, ''));
    }
});

http://jsfiddle.net/zzmJR/

Answer 2

某些版本的 jquery 在添加浏览器特定样式时失败

有时使用 JavaScript 可能会更快

var 样本 = $('#sample'); sample.style.webkitFilter = "灰度(0.6)";

Answer 3

我想您最好的选择是使用通用控制器。这样，您可以为灰度和模糊应用不同的值。理想情况下，您应该通过输入来完成，而不仅仅是单击元素。像这样的东西：

var gValue = 0;
var bValue = 0;
$('#grayscale').click(function() {
    gValue= 0.6;
    change();
});
$('#blur').click(function() {
    bValue = 0.5;
    change();
});

function change(){
   var filter = "grayscale(" + gValue + ") blur(" + bValue + ")";
   $('#sample').css("webkitFilter", filter});
}