javascript - 使用javascript更改类的样式

Question

一开始我只想知道是不是这样:

document.getElementsByClassName("main-content_datafield").style.width= this.value;

有效使用。如果是的话我就犯了一个错误。我想创建一个 rangeslider 来控制某些对象的大小。为此，我使用 javascript 获取 slider 的值并添加了之前的代码。 所以最后它看起来像这样:

http://jsfiddle.net/oqh16n2u/1/

那么我做错了什么？

谢谢!

Answer 1

尝试利用 for 循环迭代 .getElementsByClassName() 返回的 HTMLCollection ，在后面添加 "px" this.value 设置元素的宽度

var scale_range = document.getElementById('scale_range');
demo = document.getElementById("demo");

scale_range.onchange = function () {
    demo.innerHTML = this.value;

    var elems = document.getElementsByClassName("main-content_datafield");
    for (var i = 0; i < elems.length; i++) {
        elems[i].style.width = this.value + "px";
    }
}

jsfiddle http://jsfiddle.net/oqh16n2u/5/