Dynamically changing Webkit filter values

Question

I was struggling to change the value of

-webkit-filter: grayscale(30%);

value dynamically using HTML5 range input and javascript.

How could i access the css webkit filter attribute using javascript ?

Answer 1

Javascript:

function changegrayscale(value) {
    document.getElementById("divID").setAttribute("style","-webkit-filter:grayscale(" + value + "%)")
}​

HTML:

<div id="divID" onclick="changegrayscale('30')">Clcik Me</div>​​

CSS:

#divID {
    -webkit-filter: grayscale(70%);
    background: red;
    width: 100px;
    height: 100px;
}

DEMO