如何添加額外的類名稱到一個元素？

我不能相信在谷歌我找不到這一點 - 我需要一個額外的類名稱添加到div與類名checkField：如何添加額外的類名稱到一個元素？

<div id="wth" class="checkField"><label>Ok whatever</label></div> 

document.getElementById("wth").className="error"; // This works 
document.getElementsByClassName("field").className="error"; // Doesn't work

我嘗試這樣做：

document.getElementsByClassName("field").getElementsByTagName("label").className="error";

^也行不通。

有人可以給我一些建議嗎？我也習慣JQuery。

來源

2012-10-24 muudless

getElementsByClassName方法返回一個nodeList，它是一個類似數組的對象，而不是一個單個元素。要做到你想要什麼，你需要遍歷列表：

var divs = document.getElementsByClassName("checkField"); 
if (divs) { 
    // Run in reverse because we're 
    // modifying the result as we go: 
    for (var i=divs.length; i-- >= 0;) { 
    divs[i].className = 'error'; 
    } 
}

而且，只設置className實際上替代的，而不是添加到它的類。如果要添加其他類，你需要做的是這樣的：

divs[i].className += ' error'; // notice the space bar

至於你正在試圖做的，就是設置類的標籤，而不是div的第二件事，你需要通過div的循環，並呼籲他們getElementsByTagName：

var divs = document.getElementsByClassName("checkField"); 
if (divs) { 
    // Run in reverse because we're 
    // modifying the result as we go: 
    for (var i=divs.length; i-- >= 0;) { 
    var labels = divs[i].getElementsByTagName('label'); 
    if (labels) { 
     for (var j=0; j<labels.length; j++) { 
     labels[j].className = 'error'; 
     } 
    } 
    } 
}

來源

2012-10-24 04:33:14 slebetman

鑑於'.getElementsByClassName（）'應該返回一個_live_無deList，如果在第一個示例中替換類名稱，則循環將無法正常工作：http：// jsfiddle。net/bhAsE/- 儘管它在你通過列表向後循環時有效。當然，如果您添加第二個類而不是替換，這不是問題。 – nnnnnn

[getElementsByClassName]（http://dom.spec.whatwg.org/#dom-document-getelementsbyclassname）返回一個[HTMLCollection]（http://dom.spec.whatwg.org/#htmlcollection），它有一點點比普通的[NodeList]（http://dom.spec.whatwg.org/#interface-nodelist）更多的功能。 – RobG

@nnnnnn：已修復，感謝您的支持。 – slebetman

您需要的類添加到當前值：

document.body.className += " foo"; // adds foo class to body

一些瀏覽器支持classList它提供了添加，刪除和切換類的元素的方法。例如，你可以添加一個這樣的新類：

document.body.classList.add("newClass");

想象一下，切換一個類的工作;你必須執行一些字符串操作來首先確定一個類是否已經在元素上，然後相應地作出響應。隨着classList你可以只使用toggle方法：

document.body.classList.toggle("toggleMe");

有些瀏覽器目前不支持classList，但這不會阻止你採取它的優勢。您可以download a polyfill在本機不支持的地方添加此功能。

來源

2012-10-24 04:28:58 Sampson

嘗試像

要通過document.body的做到這一點

所以儘量

var demo =document.body; 

// also do this by class like var demo = document.getElementsByClassName("div1one"); 
// or id var demo = document.getElementsId("div1one"); 

demo .className = demo .className + " otherclass";

或簡單的解決方案，如果您有jQuery的作爲一個選項

$("body").addClass("yourClass");

來源

2012-10-24 04:29:06

這裏的是用於添加和刪除的一類簡單實用的功能：

function addClass(elem, cls) { 
    var oldCls = elem.className; 
    if (oldCls) { 
     oldCls += " "; 
    } 
    elem.className = oldCls + cls; 
} 

function removeClass(elem, cls) { 
    var str = " " + elem.className + " "; 
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, ""); 
}

來源

2012-10-24 06:37:01 jfriend00

如何添加額外的類名稱到一個元素？

回答

相關問題