HTML DOM Element className-eigenschap

Definitie en gebruik

className Instellen of retourneren van de class-eigenschap van het element.

Zie ook:

Element classList-eigenschap

Document getElementsByClassName() methode

HTML DOM Style Object

Voorbeeld

Voorbeeld 1

Stel de class-eigenschap van het element in:

element.className = "myStyle";

亲自试一试

Voorbeeld 2

Haal de class-eigenschap van "myDIV" op:

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

亲自试一试

Voorbeeld 3

Schakel tussen twee klassen:

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

亲自试一试

Tip:Meer voorbeelden worden onderaan de pagina aangeboden.

Syntaxis

Geef className-eigenschap terug:

HTMLElementObject.className

Stel className-eigenschap in:

HTMLElementObject.className = class

Eigenschapswaarde

Waarde 描述
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 reference manual:CSS .class selector