使用范围滑块和JavaScript更改DiV元素的宽度
使用范围滑块和JavaScript更改DiV元素的宽度
提问于 2018-06-30 05:37:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Range Slider Width</title>
<script src="slajder.js"></script>
<style>
#ekran {
width: 80px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<input type='range' min="1" max="400" value="150">
<div id='ekran'></div>
</body>
</html>如果输入范围滑块上没有ID，而DIV元素上只有id，我需要编写JS代码，所以当我根据滑块宽度的值移动滑块时，ID ='ekran‘的DIV元素也会发生变化。(当然还有一个滑块)。我不确定CSS是否正确，但我在考试中遇到了这样的情况。请帮帮我。我是JS的初学者。我还在学习，我还有很多东西要学。
PS:如果范围滑块的值是'30‘，那么div的宽度将是30px。这就是全部
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-30 05:44:16
您可以使用input事件从滑块中获取滑块的值，如下所示
e.target.value并将其设置为div的宽度
let slider = document.querySelector('[type=range]')
let div = document.querySelector('#ekran')
slider.addEventListener('input', e => {
div.style.width = e.target.value + 'px'
})#ekran {
width: 80px;
height: 100px;
background-color: pink;
}<input type='range' min="1" max="400" value="80">
<div id='ekran'></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51109702
复制相关文章
相似问题