Question

我编写了以下代码，以便制作具有id =样本灰度（0.6）和模糊（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'）; sample.style.webkitFilter =“灰度（0.6）”;

Answer 3

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

var myApp = angular.module('plunker', ['ui.bootstrap']);


var ModalDemoCtrl = function ($scope, $modal, $log) {

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: ModalInstanceCtrl,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });


    };
};
myApp.controller('modalDemoCtrl', ModalDemoCtrl);


myApp.factory('dataService', function($http) {
  return {
    getData: function() {
      return $http.get('http://prnt.sc/ashi5e');
    }
  };
});


var ModalInstanceCtrl = function ($scope, $modalInstance, items, dataService) {
    dataService.getData().then(function(response) {
      $scope.infos = response.data;
    });
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

myApp.controller('ModalInstanceCtrl', ModalInstanceCtrl);

如何通过jquery追加-webkit-filter属性

3 个答案: