En el documento HTML, la propiedad className se usa para establecer o devolver el valor del atributo de clase de un elemento. Usando esta propiedad, el usuario puede cambiar la clase de un elemento a la clase deseada.
Sintaxis:
HTMLElementObject.className;
HTMLElementObject.className = class;
El className especifica el nombre de clase de un elemento. Para aplicar varias clases, sepárelas con espacios. Como ejemplo, si un elemento tiene dos clases, las especificamos como «classname1 classname2», donde classname1 y classname2 son los nombres de dos clases diferentes. La propiedad className devuelve una string o una lista de clases de un elemento separadas por espacios.
Ejemplo-1: Este ejemplo establece la clase para el elemento <div>.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM className Property
</title>
<style>
.do_style {
width: 600px;
height: 100px;
background-color: lightgreen;
text-align: center;
font-size: 25px;
color: green;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to set a class for div.</p>
<div id="div1">
GeeksforGeeks
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("div1").className =
"do_style";
}
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón:
Inicialmente
Después de hacer clic en el botón:
Después de hacer clic en el botón probarlo
Ejemplo-2: Este ejemplo obtiene las clases del elemento <div>.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM className Property
</title>
<style>
.do_style {
width: 600px;
height: 100px;
background-color: lightgreen;
text-align: center;
font-size: 25px;
color: green;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to set a class for div.</p>
<div id="div1">
GeeksforGeeks
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("div1").className =
"do_style";
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Inicialmente
Después de hacer clic en el botón:
Después de presionar el botón probarlo
Ejemplo-3: Este ejemplo sobrescribe los nombres de clase existentes.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM className Property
</title>
<style>
.oldstyle {
width: 300px;
height: 50px;
background-color: lightgreen;
color: green;
margin-bottom: 10px;
}
.newstyle {
width: 400px;
height: 100px;
background-color: white;
text-align: center;
font-size: 25px;
color: green;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>
Click the button to change the value of the
class attribute of div to "newstyle".
</p>
<div id="div1" class="oldstyle">
GeeksforGeeks
</div>
<button onclick="myFunction()">
Try it
</button>
<script>
function myFunction() {
document.getElementById("div1").className =
"newstyle";
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Inicialmente
Después de hacer clic en el botón:
Después de pulsar pruébalo
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA