HTML DOM Element className 属性

定义和用法

className 属性设置或返回元素的 class 属性。

另请参阅：

Element classList 属性

Document getElementsByClassName() 方法

Objek Style HTML DOM

实例

例子 1

设置元素的 class 属性：

element.className = "myStyle";

Cuba sendiri

例子 2

获取 "myDIV" 的 class 属性：

let value = document.getElementById("myDIV").className;

Cuba sendiri

例子 3

在两个类名之间切换：

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

Cuba sendiri

提示：页面下方提供更多实例。

语法

返回 className 属性：

HTMLElementObject.className

设置 className 属性：

HTMLElementObject.className = class

属性值

值 Deskripsi
class

Nama kelas elemen.

Pisahkan beberapa kelas dengan spasi, seperti "test demo".

Kembalian nilai

Tipe Deskripsi
String Kelas elemen, atau daftar kelas yang dipisahkan dengan spasi.

Beberapa contoh lain

Contoh 4

Dapatkan properti class elemen <div> pertama (jika ada):

let value = document.getElementsByTagName("div")[0].className;

Cuba sendiri

Contoh 5

Dapatkan properti class yang memiliki beberapa kelas:

<div id="myDIV" class="myStyle test example">
<p>Saya adalah myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

Cuba sendiri

Contoh 6

Ganti properti class yang ada dengan properti class baru:

element.className = "newClassName";

Cuba sendiri

Contoh 7

Untuk menambahkan kelas baru tanpa mengganti nilai yang ada, tambahkan spasi dan kelas baru:

element.className += " class1 class2";

Cuba sendiri

Contoh 8

Jika "myDIV" memiliki kelas "myStyle", maka ubah ukuran huruf:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

Cuba sendiri

Contoh 9

Jika anda menggerakkan ke atas halaman 50 pixel, maka akan ditambahkan kelas "test":

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

Cuba sendiri

Dukungan pelayar

Semua pelayar mendukung element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukung Dukung Dukung Dukung Dukung Dukung

页面相关

Panduan Am CSS:Sintaks CSS

Panduan Rujukan CSS:Pemilih Pemilihan .class CSS