Utiliser le curseur pour changer le filtre CSS de l'image avec Javascript

J'essaie de changer le filtre css (hue-rotate pour être exact) sur un png en utilisant une entrée de curseur. Je continue à obtenir "-webkit-filtre: hue-rotate (undefined degrés)"Utiliser le curseur pour changer le filtre CSS de l'image avec Javascript

Merci pour votre aide!

Voici mon code:

function hueFunction(hueVal) { 
 
    var setAs = hueVal + "deg" 
 
    document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") 
 
}

<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.hueVal)"> 
 

 
<br/> 
 

 
<img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">

Source

2017-10-03 user3491000

changement oninput="hueFunction(this.hueVal)" à oninput="hueFunction(this.value)"

function hueFunction(hueVal) { 
 
    var setAs = hueVal + "deg" 
 
    document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")") 
 
}

<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)"> 
 

 
<br/> 
 

 
<img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">

Source

2017-10-03 20:40:04

Vous êtes incroyable! Cela a fait l'affaire. Merci beaucoup. – user3491000

Savez-vous pourquoi cela ne fonctionne pas avec les classes au lieu des ID? Si j'échange "getElementByID" pour "getElementsByClassName" cela ne fonctionne pas. – user3491000

'getElementById' renvoie un seul élément,' getElementsByClassName' - un tableau d'éléments. Vous devez spécifier celui que vous voulez utiliser, comme 'getElementsByClassName ('youClassName') [0]' http://jsbin.com/piworezoco/edit?html,js,output –

Utiliser le curseur pour changer le filtre CSS de l'image avec Javascript

Répondre

Questions connexes