javascript - 使用 javascript 更改类的样式

Question

起初我只想知道这是否：

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

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

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

那么我在这里做错了什么？

谢谢你！

Answer 1

尝试利用for循环来迭代HTMLCollection由返回的，在元素集合之后.getElementsByClassName()添加"px"this.valuewidth

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/

Answer 2

由于您已经在使用 jQuery，因此您可以使用 jQuery 中的css()方法获得所需的效果。

scale_range.onchange = function() {
    demo.innerHTML = this.value;
    $('.main-content_datafield').css('width',this.value+'px');
}

工作小提琴：http: //jsfiddle.net/MasoomS/oqh16n2u/4/

Answer 3

你快到了。以下是您的代码的一些问题：

1. document.getElementsByClassName("main-content_datafield")返回一个类似数组的对象，而不是一个 DOM Element 对象。因此，您必须在该数组上进行迭代。
2. width 属性也采用单位。

因此，您最好使用以下方法：

document.getElementsByClassName("main-content_datafield")[i].style.width = this.value + 'px'; 在一个循环中。