设置新的元素类属性值
设置新的元素类属性值
提问于 2018-12-11 04:18:10
如何使用javascript将10px添加到css类属性中？
例如：
var bigger = document.getElementsByClassName("size200").style.width;
bigger + 10;回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-11 04:32:51
要达到预期效果，请使用以下选项
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
Stack Overflow用户
发布于 2018-12-11 04:19:56
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53713027
复制相关文章
相似问题