如何从jQuery改为JavaScript

Question

$(".normalText").css("border", "0px solid green"); 

你会如何用普通的JavaScript等价物替换这个jQuery语句？

Answer 1

尝试

document.getElementsByClassName('normalText').style.border = '0px solid green'; 

Answer 2

有没有像这样内置到JavaScript据我所知（编辑：实际上，有getElementsByClassName方法，其对某些浏览器上运行）。

我想你最好的机会是编写一个函数，它循环遍历每个DOM元素并将类字段与其参数进行比较。

Answer 3

要获得含有class="normalText"所有元素的NodeList，你可以使用：

var els = document.getElementsByClassName('normalText'); 

然后遍历它们：

var els = document.getElementsByClassName('normalText'), 
    len = els.length; 
while (len--) { 
    els[len].style.border = '3px solid hotpink'; 
} 

getElementsByClassName不some older browsers支持。如果支持是一个问题，您可以使用类似this或this的回退。

在另一方面，如果你只支持现代浏览器，你还不如用querySelectorAll和Array#forEach：

[].forEach.call(document.querySelectorAll('.normalText'), function(el) { 
    el.style.border = '3px solid hotpink'; 
}); 

Answer 4

对于现代的浏览器可以使用.getElementsByClassName() method ^{MDC docs}

document.getElementsByClassName('normalText'); 

为更现代的你可以用.querySelectorAll() method ^{MDC docs}

document.querySelectorAll('.normalText'); 

旧版本浏览器，你可以做

function getElementsByClassName(oElm, strTagName, strClassName){ 
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName); 
    var arrReturnElements = new Array(); 
    strClassName = strClassName.replace(/\-/g, "\\-"); 
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); 
    var oElement; 
    for(var i=0; i<arrElements.length; i++){ 
     oElement = arrElements[i]; 
     if(oRegExp.test(oElement.className)){ 
      arrReturnElements.push(oElement); 
     } 
    } 
    return (arrReturnElements) 
} 

（从http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/采取），并与

getElementsByClassName(document, "*", "normalText");