Don't panic.

javascript 通过变量改变元素属性值

今天学习了一个场景:根据变量的值来改变元素的 height 和 width,代码如下

var my_height = 100px;
var my_width = 100px;
document.getElementById('myElementId').style.height = my_height + "px";
document.getElementById('myElementId').style.width = my_width + "px";

在选择元素时,刚开始使用了getElementsByClassName,但是一直报错,代码如下

document.getElementsByClassName('myElementClass').style.height = '100px';

错误的原因是getElementsByClassName函数返回的是一个数组(一个 class 可能会对应多个元素),所以要对返回的组数用 for 循环来操作对象:

var elems = document.getElementsByClassName('myElementClass');
for(var i = 0; i < elems.length; i++) {
elems[i].style.height = '100px';
}