установить новое значение свойства класса элемента

Question

Как добавить 10px в свойство класса css с помощью javascript?

, например:

var bigger = document.getElementsByClassName("size200").style.width;
bigger + 10;

Answer 1

Для достижения ожидаемого результата используйте нижеприведенную опцию

let width = document.getElementsByClassName("size200")[0].clientWidth + 10;
document.getElementsByClassName("size200")[0].style.width = width + 'px'

codepen - https://codepen.io/nagasai/pen/roazyL

let width = document.getElementsByClassName("size200")[0].clientWidth + 10;
document.getElementsByClassName("size200")[0].style.width = width + 'px'

.size200{
  width: 200px;
  border: 1px solid black;
  height: 20px
}

.size100{
  width: 200px;
  border: 1px solid black;
  height: 20px
}

<div class="size200">
  
</div>

<div class="size200">
  
</div>

<div class="size100">
  
</div>

Приведенное выше решение изменит только первый класс, чтобы подать заявку на каждый элемент с таким же классом

for(var i = 0; i < document.getElementsByClassName("size200").length; i++){
    let width = document.getElementsByClassName("size200")[i].clientWidth + 10;
    document.getElementsByClassName("size200")[i].style.width = width + 'px'
}

codepen - https://codepen.io/nagasai/pen/vvEJRz

Answer 2

setTimeout(() => {

  // get width
  let width = window.getComputedStyle(document.querySelector('.some-class')).width;
  width = +width.substr(0,width.length-2);
  let newWidth = `${width+100}px`;
  
  // set style
  Array(document.getElementsByClassName('some-class').length)
    .fill()
    .map((_, index) => {
      document.getElementsByClassName('some-class')[index].style.width = newWidth;
    });
    
}, 1000)

.some-class {
  width: 200px;
  height: 200px;
  background-color: red;
  transition: all .5s;
}

<div class="some-class"></div>
<p>
wait 1s
</p>
<div class="some-class"></div>