HTML DOM Element className Eigenschaft

Definition und Verwendung

className Eigenschaft setzen oder zurückschreiben der class-Eigenschaft des Elements.

Siehe auch:

Element classList Eigenschaft

Document getElementsByClassName() Methode

HTML DOM Style-Objekt

Beispiel

Beispiel 1

Setzen Sie die class-Eigenschaft des Elements:

element.className = "myStyle";

亲自试一试

Beispiel 2

Beschaffung der class-Eigenschaft von "myDIV":

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

亲自试一试

Beispiel 3

Wechseln Sie 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

Eigenschaftswert

Wert 描述
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-Syntax

CSS-Referenzhandbuch:CSS .class-Selektor