슬라이더를 사용하여 이미지 CSS 필터를 자바 스크립트로 변경하십시오.

슬라이더 입력을 사용하여 png에서 CSS 필터 (색조 - 정확하게 회전)를 변경하려고합니다. 계속 - "웹 필터 - 필터 : 색조 - 회전 (정의되지 않음도)"슬라이더를 사용하여 이미지 CSS 필터를 자바 스크립트로 변경하십시오.

감사합니다.

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">

출처

2017-10-03 user3491000

변경 oninput="hueFunction(this.hueVal)"

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">

출처

2017-10-03 20:40:04

당신은 놀라운 oninput="hueFunction(this.value)"에 :

여기 내 코드입니다! 그것은 트릭을했다. 한 무리 주셔서 감사합니다. – user3491000

이것이 ID 대신 클래스에서 작동하지 않는 이유를 알고 있습니까? "getElementByID"를 "getElementsByClassName"으로 바꾸면 작동하지 않습니다. – user3491000

'getElementById'는 하나의 요소, getElementsByClassName' - 요소의 배열을 반환합니다. 'getElementsByClassName ('youClassName') [0]'http://jsbin.com/piworezoco/edit?html,js,output –

슬라이더를 사용하여 이미지 CSS 필터를 자바 스크립트로 변경하십시오.

답변

관련 문제