Question

这是我的html：

<main>
<div id="sliderBox">
    <form>
       <p><label>Saturation: </label><input type="range" id="sliderSaturation" min="1" max="300" value="100" class="sliders"/> <span id="numSaturation">100</span>%</p>
    </form>    
</div>
<figure id="imgManipulated">
    <img src="images/medium/painting1.jpg" > 

</figure>  
</main>

我想使用javascript eventListener进行输入并使用滑块更改img的饱和度

我已经抓取了img并设置了eventListener，但是我对如何从这里开始感到困惑。

const img2Change = document.querySelector("#imgManipulated img");
img2Change.addEventListener('input', function(){


});

Answer 1

这是吗？

此外，input事件仅适用于输入，不适用于图像。

const sliderOpacity = document.querySelector("#sliderOpacity");
const img = document.querySelector("#imgManipulated");

sliderOpacity.addEventListener('input', function(){
  img.style.opacity = (sliderOpacity.value)/100;
// I divide by 100 because "opacity" takes a value between 0 and 1.
});

<main>
<div id="sliderBox">
    <form>
       <label>Opacity: </label><p><input type="range" id="sliderOpacity" min="0" max="100" value="100" class="sliders" /> <span id="numOpacity">100</span>%
    </form>    
</div>
<figure id="imgManipulated">
    <img src="https://picsum.photos/400" > 

</figure>  
</main>

如何通过事件监听器使用滑块更改img的不透明度？

1 个答案: