jQuery CSS到纯Javascript

Question

我试图尽可能少地使用jQuery，我想将一些jQuery代码转换成纯JS。

我有这个：

$(".myDiv").css({"width": 500});

以上代码的纯JS等效值是什么？

Answer 1

var els = document.querySelectorAll('.myDiv');

// If you want to get elements using its class name
// var els = document.getElementsByClassName('myDiv');

for(var i = 0, length = els.length; i < length; i++) {
   els[i].style.width = '500px';
}

通过使用forEach

var els = document.querySelectorAll('.myDiv');

els.forEach(function(el, ind) {
  el.style.width = '500px';
});

JS Fiddle

Answer 2

有几种方法可以达到同样的效果，但您可以这样做：

document.querySelectorAll('.myDiv').forEach(function(el) {
  el.style.width = '500px';
});

querySelectorAll选择所有特定的CSS选择器作为DOM元素的集合。forEach遍历集合，将当前选定的元素传递给内部函数，然后使用style.width进行样式设置。

Answer 3

document.querySelectorAll('.myDiv').forEach(function(elem) {
    elem.style.width = "500px";
})

querySelectorAll获取元素，然后遍历元素并设置每个元素的样式。