Javascript Girl
  1. Javascript Girl
  3. Modification dynamique des valeurs du filtre Webkit
Intereting Posts
Comment remplacer les adresses email avec des liens mailto dans une page Web en direct? Angular.js – Appliquer le filtre à l'aide d'un intervalle Pusher one to one chat structure JL angulaire: comment charger des fichiers js en partiels Existe-t-il un équivalent C # String.Format () en JavaScript? Google Charts n'accepte pas le tableau correctement formaté en tant que données de ligne Comment se déconnecter d'une application où j'ai utilisé OAuth2 pour vous connecter à Google? Pourquoi un protocole n'est-il pas spécifié pour cette étiquette de script facebook? JQuery: sélectionnez la suite div en dehors de parent div Leaflet Draw Plugin: Comment cacher / afficher les outils de dessin par type de couche dynamiquement Comment attribuer des couleurs aléatoires au diagramme à barres D3? Javascript setinterval avec temps aléatoire Javascript ne peut pas accéder aux propriétés privées Détecter "image corrompue ou tronquée" dans Firefox Accédez aux événements ajoutés avec attachEvent () / addEventListener () en JavaScript

Modification dynamique des valeurs du filtre Webkit

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+'%)' }); }