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

【问题标题】：Change width of DiV element using range slider and JavaScript使用范围滑块和 JavaScript 更改 DiV 元素的宽度
【发布时间】：2018-06-30 08:16:49
【问题描述】：

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

【问题讨论】：

标签： javascript html css width addeventlistener

【解决方案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>

【讨论】：

顺便说一句，有些东西不起作用。我刚试过。我补充说；在每个变量和函数之后......不知道发生了什么。
嗨，我正在寻找这样的例子。但我需要帮助。我必须更改宽度和高度，但我必须使用 Jquery 而不是 Javascript。