使用 javascript 更改 class 的样式

Question

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

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

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

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

那么我做错了什么？

谢谢！

Answer 1

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

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');
}

工作fiddle：http://jsfiddle.net/MasoomS/oqh16n2u/4/

Answer 3

你快到了。您的代码存在一些问题：

document.getElementsByClassName("main-content_datafield") returns 一个 array-like object 而不是 DOM 元素对象。因此，您必须迭代该数组。
宽度属性也取单位

所以你最好用这样的东西：

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

使用 javascript 更改 class 的样式

change style of a class using javascript

javascript

jquery

css

rangeslider