HTML DOM Element className 属性

定义和用法

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

另请参阅：

Element classList 属性

Document getElementsByClassName() 方法

Objeto Style de HTML DOM

实例

例子 1

设置元素的 class 属性：

element.className = "myStyle";

intente hacerlo usted mismo

例子 2

获取 "myDIV" 的 class 属性：

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

intente hacerlo usted mismo

例子 3

在两个类名之间切换：

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

intente hacerlo usted mismo

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

语法

返回 className 属性：

HTMLElementObject.className

设置 className 属性：

HTMLElementObject.className = class

属性值

值 descripción
class

el nombre de la clase del elemento.

separar múltiples clases con espacios, por ejemplo, "test demo".

valor de retorno

tipo descripción
cadena la clase del elemento, o una lista de clases separadas por espacios.

más ejemplos

ejemplo 4

obtener la propiedad class del primer <div> elemento (si existe):

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

intente hacerlo usted mismo

ejemplo 5

obtener la propiedad class que tiene múltiples clases:

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

intente hacerlo usted mismo

ejemplo 6

cubra la propiedad class existente con una nueva propiedad class:

element.className = "newClassName";

intente hacerlo usted mismo

ejemplo 7

para agregar una nueva clase sin sobrescribir los valores existentes, agregue un espacio y la nueva clase:

element.className += " class1 class2";

intente hacerlo usted mismo

ejemplo 8

si "myDIV" tiene la clase "myStyle", cambia el tamaño de la fuente:

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

intente hacerlo usted mismo

ejemplo 9

si se desplaza 50 píxeles desde la parte superior de la página, se agregará la clase "test":

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

intente hacerlo usted mismo

soporte del navegador

todos los navegadores lo admiten element.className:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
soporte soporte soporte soporte soporte soporte

páginas relacionadas

Tutoriales de CSS:Sintaxis de CSS

Manual de referencia de CSS:Selector .class de CSS