HTML DOM Element className property

Definition and usage

className Set or return the class attribute of the element.

See also:

Element classList property

Document getElementsByClassName() method

Объект Style HTML DOM

Example

Example 1

Set the class attribute of the element:

element.className = "myStyle";

попробуйте сами

Example 2

Get the class attribute of "myDIV":

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

попробуйте сами

Example 3

Switch between two class names:

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

попробуйте сами

Tip:More examples are provided below the page.

Syntax

Return the className property:

HTMLElementObject.className

Set the className property:

HTMLElementObject.className = class

Attribute value

Worth описание
class

имя класса элемента.

классы разделены пробелами, например "test demo".

возвратное значение

тип описание
строка класс элемента, или список классов, разделенных пробелами.

Более сложные примеры

пример 4

Получите класс attribute первого <div> элемента (если он есть):

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

попробуйте сами

пример 5

Получите класс attribute с несколькими классами:

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

попробуйте сами

пример 6

Замените существующий класс новым классом attribute 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:Грамматика CSS

Руководство CSS:Выборщик .class CSS