我创建了这个简单的输入范围(值从 0 到 100)和一个 div 元素(#boxColor)。 我想要实现的是,当我将输入范围 slider 拖动到左侧(低于值 33)时,框的颜色更改为绿色。另外,如果我将输入范围 slider 拖动到右侧(66 以上),框的颜色应更改为红色。值 34-65 之间的框应保持蓝色。 这里有人知道如何实现这一目标吗?
function myFunction() {
var x = document.getElementById("myRange").value;
if (x = "50") {
document.getElementById("text").innerHTML = "new";
}
}
#boxColor {
width: 100px; height: 100px; background: blue; margin-top: 20px;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div id="boxColor"></div>
最佳答案
您可以通过监听 slider 元素上的输入事件来更改框元素的样式,如下所示:
const slider = document.getElementById('myRange');
const box = document.getElementById('boxColor');
slider.oninput = ({ target: { value } }) => {
if (+value < 33) box.style.background = 'green';
else if (+value > 66) box.style.background = 'red';
else box.style.background = 'blue';
}
#boxColor {
width: 100px; height: 100px; background: blue; margin-top: 20px;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div id="boxColor"></div>
关于javascript - 根据输入元素范围更改 div-element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61187076/