JavaScript className

admin發表於2018-11-22
JavaScript

className是當前（2018-11）最為常用的屬性之一。

利用它可以操作DOM元素的class屬性，從而實現設定元素CSS樣式等功能。

之所以說它是當前最為常用的屬性，是因為在可以預測的將來，很有可能被classList取代。

因為classList對元素class屬性操作更為方便，HTML5新增，所以當前有很大相容性問題。

更多內容可參閱如下兩篇文章：

（1）.classList參閱JavaScript classList一章節。

（2）.兩者區別參閱className與classList區別一章節。

className屬性可以設定或者返回元素的class屬性值，下面將結合程式碼例項詳細做一下介紹。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
elem.className=classname

通常情況下，HTML元素屬性與獲取它們的DOM元素物件屬性是一致的

比如要獲取id屬性值，使用dom.id即可，但class是JavaScript中的關鍵字，使用className作為名稱。

瀏覽器支援:

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.opera瀏覽器支援此屬性。

（5）.火狐瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.set{
  width:100px;
  height:100px;
  line-height:100px;
  border:10px solid red;
  text-align:center;
}
</style>
<script> 
window.onload=function(){
  let obt = document.getElementById("bt");
  let odiv = document.getElementById("ant");
  obt.onclick = function () {
    odiv.innerHTML = odiv.className;
  }
}
</script> 
</head> 
<body> 
<div id="ant" class="set"></div>
<input type="button" id="bt" value="檢視演示"/>
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/133901mxy7cpibzxj41h31.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

點選按鈕可以將對應元素的class屬性值寫入div中。

大家知道，通過class屬性可以一次性設定多個樣式類。

程式碼片段如下：

[HTML] 純文字檢視 複製程式碼
<div class=" a   b c"></div>

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.set{
  width:100px;
  height:100px;
  line-height:100px;
  border:10px solid red;
  text-align:center;
}
</style>
<script> 
window.onload=function(){
  let obt = document.getElementById("bt");
  let odiv = document.getElementById("ant");
  String.prototype.trim=function(){ 
    return this.replace(/(^\s*)|(\s*$)/g,""); 
  } 
  Array.prototype.removeByValue = function(val) {
    let arr=[];
    for(let i=0; i<this.length; i++) {
      if(this[i] != val) {
        arr.push(this[i]);
      }
    }
    return arr;
  }
  obt.onclick = function () {
    let str = odiv.className.trim();
    let arr=str.split(" ");
    console.log(arr.removeByValue(""))
  }
}
</script> 
</head> 
<body> 
<div id="ant" class=" a  b c"></div>
<input type="button" id="bt" value="檢視演示"/>
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/133936kib1zoadhd8o5116.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.點選按鈕後返回一個陣列，陣列中存放著class屬性規定的各個類名。

（2）.有時候class屬性值寫的比較隨意，前後有空格，或者類名之間有多個空格分隔，但是語法上是允許的。

（3）.所以自定義trim方法刪除字串兩端空格。

（3）.自定義removeByValue方法刪除陣列中的空元素。

可以看到className對於樣式類的操作相對較為麻煩，因為它返回一個字串，實質上是對字串的操作，而classList返回的是集合，通過內建的方法操作集合更為便利簡單。

特別說明：ES5新增trim方法可以刪除字元兩端空格。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border:10px solid red;
}
.a{background-color:#ccc;}
.b{color:green;}
</style>
<script> 
window.onload=function(){
  let addBt=document.getElementById("add");
  let delBt=document.getElementById("del");
  let odiv = document.getElementById("ant");
    
  addBt.onclick = function () {
    odiv.className = "a"
  }
  delBt.onclick = function () {
    odiv.className = "b"
  }
}
</script> 
</head> 
<body> 
<div id="ant">螞蟻部落</div>
<input type="button" id="add" value="背景色"/>
<input type="button" id="del" value="字型顏色"/>
</body> 
</html>

點選按鈕可以分別設定元素背景顏色和字型顏色。

程式碼分析如下：

（1）.className屬性是重置class屬性值，而不是追加class屬性值，並非增量操作。

（2）.作為className屬性值的類名前面不要加點（.）。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border:10px solid red;
}
.a{background-color:#ccc;}
.b{color:green;}
</style>
<script> 
window.onload=function(){
  let obt=document.getElementById("bt");
  let odiv = document.getElementById("ant");
    
  obt.onclick = function () {
    odiv.className = "a b"
  }
}
</script> 
</head> 
<body> 
<div id="ant">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

通過className屬性可以為元素一次性設定多個樣式類。

樣式類之間用空格分隔，要求比較寬鬆，前後左右都允許有空格，且數量不限。

相關文章