Изменить ширину элемента DiV с помощью ползунка диапазона и JavaScript - PullRequest
Новая
       6

Изменить ширину элемента DiV с помощью ползунка диапазона и JavaScript

0 голосов
/ 30 июня 2018 
<!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>

Без идентификатора на ползунке входного диапазона с единственным идентификатором на элементе DIV мне нужно было написать код JS, поэтому при перемещении ползунка в соответствии со значением ширины ползунка этого элемента DIV с ID = 'ekran' также изменяется. (с ползунком конечно). Я не уверен, что CSS правильный, но у меня было что-то подобное на экзамене. Пожалуйста, помогите, ребята. Я начинающий в JS. Изучаю его до сих пор, и у меня есть больше знаний, чтобы учиться.

PS: если значение ползунка диапазона '30', ширина этого div будет 30px. вот и все

1 Ответ

0 голосов
/ 30 июня 2018

вы можете получить значение ползунка из события 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>
...