HTML DOM Element className Eigenschaft

Definition und Verwendung

className Eigenschaft setzen oder die Class-Eigenschaft des Elements zurückgeben.

Siehe auch:

Element classList Eigenschaft

Document getElementsByClassName() Methode

Object ng Style ng HTML DOM

Beispiel

Beispiel 1

Die Class-Eigenschaft des Elements setzen:

element.className = "myStyle";

親自試一試

Beispiel 2

Die Class-Eigenschaft von "myDIV" abrufen:

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

親自試一試

Beispiel 3

Umschalten zwischen zwei Klassennamen:

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

親自試一試

Hinweis:Mehr Beispiele finden Sie unten auf der Seite.

Syntax

Rückgabe der Eigenschaft className:

HTMLElementObject.className

Setzen Sie die Eigenschaft className:

HTMLElementObject.className = class

Wertigkeit

Werte 描述
class

元素的類名。

用空格分隔多個類，比如 "test demo"。

返回值

類型 描述
字符串 元素的類，或以空格分隔的類列表。

更多實例

例子 4

獲取第一個 <div> 元素的 class 屬性（如果有）：

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

親自試一試

例子 5

獲取具有多個類的 class 屬性：

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

親自試一試

例子 6

用新的 class 屬性覆蓋現有的 class 屬性：

element.className = "newClassName";

親自試一試

例子 7

如需添加新類而不覆蓋現有值，請添加空格和新類：

element.className += " class1 class2";

親自試一試

例子 8

如果 "myDIV" 有 "myStyle" 類，則更改字體大小：

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

親自試一試

例子 9

如果您從頁面頂部滾動 50 像素，則會添加 "test" 類：

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

親自試一試

瀏覽器支持

所有瀏覽器都支持 element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持

相关頁面

CSS Tutorial:CSS Grammar

CSS Reference Manual:CSS .class Selector