Question

<!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。就是这样

Answer 1

您可以像这样从滑块的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>

使用范围滑块和JavaScript更改DiV元素的宽度

1 个答案: