Je luttais pour changer la valeur de
-webkit-filter: grayscale(30%);
Valorisent dynamiquement l'entrée de la gamme HTML5 et javascript.
Comment puis-je accéder à l'attribut css webkit filter à l'aide de javascript?
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
Essayez ceci – DEMO
<input type="range" min="0" max="100" step="10" id="inp" /> <img src="http://lorempixel.com/300/200" id="img" /> <img src="http://lorempixel.com/300/200" /> <script> document.getElementById("inp").addEventListener("change", function() { document.getElementById("img").setAttribute("style", "-webkit-filter:grayscale(" + this.value + "%)"); }, false); </script>
Avec jQuery, vous pouvez le faire de la sorte sur les '.elements':
function changegrayscale(value) { $('.elements').css({ '-webkit-filter': 'grayscale('+value+'%)' }); }