檢查CSS類是否存在沒有jQuery

使用香草的JavaScript或原型可以有人告訴我如何運行檢查，看看是否存在類？比如我加入了一個名爲hideIt類與此代碼：檢查CSS類是否存在沒有jQuery

var overlay = document.getElementById("overlay_modal"); 
overlay.className += " hideIt";

我還需要一個腳本，以後可以檢查，看看是否存在hideIt。我曾嘗試過這樣的事情：

if (overlay.className == "hideIt")

但這並不好。有任何想法嗎？

來源

2011-12-06 Zac

爲什麼會這樣下來票呢？ – Zac

使用regexp。 \b將匹配單詞邊界（空格，換行符，標點符號或字符串末尾）。

var overlay = document.getElementById("overlay_modal"); 
if (overlay.className.match(/\bhideIt\b/)) 
{ 
    // frob a widget 
}

來源

2011-12-06 19:14:46

謝謝這個作品真的很棒！ – Zac

最好，最乾淨，支持最廣泛的答案！ :) – MRVDOG

你可以使用getElementsByClassName()，雖然這不是在所有瀏覽器（不是IE < 9）支持：

if (!document.getElementsByClassName('classname').length){ 
    // class name does not exist in the document 
} 

else { 
    // class exists in the document 
}

，你可以根據瀏覽器的兼容性的要求，採用querySelectorAll()：

if (document.querySelectorAll('#overlay_modal.hideIt')) { 
    // the element with id of overlay_modal exists and has the class-name 'hideIt' 
}

參考文獻：

來源

2011-12-06 19:16:17

我仍然認爲[在元素的'className']（http://stackoverflow.com/a/8405435/139010）上使用正則表達式是這種情況下最好的方法，因爲它們已經引用了元素本身。適用於所有瀏覽器，不需要功能檢測或墊片。 –

我傾向於同意，但是由於您已經涵蓋了這個角度，在我自己的答案中包括這方面並不合適。我並不是說這些都是最好的方式，而是爲那些已經發布的東西提供了替代方案。 –

var id = document.getElementById("id"); 
var classes = id.className.split(" "); 
if(classes.indexOf("class_name") == -1) 
{ 
}

來源

2011-12-06 19:23:01 Mike

我想你是指'！== -1'。 –

因爲問題問在這裏也the Prototype way，

if (overlay.hasClassName('hideIt'))

來源

2011-12-07 23:27:51 clockworkgeek

謝謝！很高興知道 – Zac

檢查CSS類是否存在沒有jQuery

回答

相關問題