javascript - 设置新元素类属性值

Question

如何使用 javascript 将 10px 添加到 css 类属性？

例如:

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