如何從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");