How to set javascripts style."property" as a function parameter?

Question

As you can see, I am trying to pass in the the style property as a parameter which I can edit on my function call. It does not work and I honestly have no idea why. What could the cause be? Do I have to pass the parameter on to my 'click', function(prop) as well?

var clicked = false;
function filter(elem, prop) {
    var elem;
    var prop;

    document.getElementById(elem).addEventListener('click', function() {
        if (clicked == false) {
            this.style.prop = 'blur(40px)';
            clicked = true;
        }
        else {
            this.style.prop = 'blur(0px)';
            clicked = !clicked;
        }
    console.log(clicked);
    });
};
filter('case', 'filter');

score 0 · Accepted Answer · answered Sep 10 '15 at 11:42

You need to use bracket notation for dynamic property names:

var clicked = false;

function filter(elem, prop) {
    document.getElementById(elem).addEventListener('click', function () {
        if (clicked == false) {
            this.style[prop] = 'blur(4px)';
            clicked = true;
        } else {
            this.style[prop] = 'blur(0px)';
            clicked = !clicked;
        }
        console.log(clicked);
    });
};

filter('case', '-webkit-filter');

<div id="case">Case</div>

Also, you need to be aware of browser support for CSS filters and use vendor prefixes accordingly.

How to set javascripts style."property" as a function parameter?

1 Answers1