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

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 的 DIV 元素的滑块宽度值移动滑块时='ekran'也在改变。（当然有滑块）。我不确定 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 元素的宽度

Change width of DiV element using range slider and JavaScript

html

javascript

css

addeventlistener

width