Question

起初我只想知道是否：

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

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

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

那我在这里做错了什么？

谢谢你！

Answer 1

尝试使用for循环来迭代HTMLCollection返回的.getElementsByClassName()，在"px"之后添加this.value来设置元素的width

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，因此U可以使用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

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

document.getElementsByClassName("main-content_datafield")返回一个array-like object而不是DOM Element对象。所以，你必须迭代那个数组。
width属性也包含在单位中。

所以你最好用以下的东西：

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

使用javascript更改类的样式

3 个答案: