HTML DOM Element className 属性

定义和用法

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

另请参阅：

Element classList 属性

Document getElementsByClassName() 方法

Objek Style DOM

实例

例子 1

设置元素的 class 属性：

element.className = "myStyle";

cobalah sendiri

例子 2

获取 "myDIV" 的 class 属性：

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

cobalah sendiri

例子 3

在两个类名之间切换：

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

cobalah sendiri

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

语法

返回 className 属性：

HTMLElementObject.className

设置 className 属性：

HTMLElementObject.className = class

属性值

值 deskripsi
class

nama class elemen.

pisahkan beberapa class dengan spasi, seperti "test demo".

nilai kembalian

tipe deskripsi
string class elemen, atau daftar class yang dipisahkan dengan spasi.

contoh lainnya

contoh 4

ambil class atribut elemen <div> pertama (jika ada):

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

cobalah sendiri

contoh 5

ambil class atribut yang memiliki beberapa class:

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

cobalah sendiri

contoh 6

ganti class atribut yang ada dengan class atribut baru:

element.className = "newClassName";

cobalah sendiri

contoh 7

untuk menambahkan class baru tanpa mengganti nilai yang ada, tambahkan spasi dan class baru:

element.className += " class1 class2";

cobalah sendiri

contoh 8

jika "myDIV" memiliki class "myStyle", ubah ukuran font:

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

cobalah sendiri

contoh 9

jika Anda menggulir ke atas halaman 50 pixel, "test" class akan ditambahkan:

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

cobalah sendiri

dukungan peramban

semua peramban mendukung element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
dukungan dukungan dukungan dukungan dukungan dukungan

halaman yang relevan

Panduan CSS:Syarat CSS

Panduan Referensi CSS:Pemilih .class CSS