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获取元素，然后迭代元素并为每个元素设置样式。

Answer 4

您只需使用document.getElementsByClassName()获取此类的所有元素，然后迭代它们并使用style.width更改其宽度：

Array.from(document.getElementsByClassName("myDiv")).forEach(function(div) {
  div.style.width = "500px";
});

<强>演示：

＆＃13;

Array.from(document.getElementsByClassName("myDiv")).forEach(function(div) {
  div.style.width = "100px";
});

＆＃13;

.myDiv{
     background-color:yellow;
}

＆＃13;

<div class="myDiv">A</div>

＆＃13;

注意：

我们使用 Array.from() 将document.getElementsByClassName的结果视为Array，因为它作为Nodelist或者Array返回 类似数组的对象 ，并且没有{{1}}属性和 .forEach < / strong>旧浏览器中的方法。

Answer 5

使用cssText

css(document.getElementById("red"),"color:red;font-size:24px")


function css(el,cssText){

el.style.cssText=cssText;


}

<div id="red">something</div>

jQuery CSS到纯Javascript

5 个答案: