CODEWITHSUNDEEP
javascriptdom
MATKALI
MATKALI

Reputation: 57

set new element class property value

How to add 10px to an css class property with javascript?

for example:

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

Upvotes: 0

Views: 48

Answers (2)

Nino Filiu
Nino Filiu

Reputation: 18493

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>

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result ,use below option 

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>

Above solution will change only first class , to apply for every element with same class

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

Upvotes: 1

Related Questions