плюс ширина div в DOM - PullRequest
Новая
       31

плюс ширина div в DOM

0 голосов
/ 18 марта 2020

у меня есть образец div (ширина: 10%) и кнопка образца, я хочу, чтобы при нажатии на кнопку, ширина div плюс с 10.

первый щелчок >> ширина = 20%

второй клик >> ширина = 30%. , .

это можно сделать с помощью DOM?

HTML

<div></div>
<input id="btn" type="button" value="Progresse Bar +10%">
<script src="main.js"></script>

CSS

div {
width: 10%;
height: 200px;
background-color: rgb(173, 230, 18);
}

js

document.getElementById("btn").addEventListener("click", func);
function func() {
document.getElementsByTagName("div")[0].style.width+=10;
}

1 Ответ

0 голосов
/ 19 марта 2020

Да, вы можете описать следующее поведение: 

document.getElementById("btn").addEventListener("click", incrementWidth);

// Initialize the width
let width = 10;
setWidthOnElement(width);

function incrementWidth() {
  width += 10;
  setWidthOnElement(width);
}

function setWidthOnElement(width) {
  document.getElementsByTagName("div")[0].style.width = `${width}%`;
}
.progress-bar {
   height: 200px;
   background-color: rgb(173, 230, 18);
}
<div class="progress-bar"></div>
<input id="btn" type="button" value="Progresse Bar +10%">
...