blob: be9b04b4b04d39accd08cb53a268b891a7314cd9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: Element.className
slug: Web/API/Element/className
tags:
- API
- DOM
- Gecko
- Propiedad
- Referencia
translation_of: Web/API/Element/className
---
<div>{{APIRef("DOM")}}</div>
<h2 id="Resumen">Resumen</h2>
<p><strong>className</strong> obtiene y establece el valor del atributo <code>class</code> del elemento especificado.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
<ul>
<li><var>cName</var> es una variable de cadena representando la clase o la lista de clases separada por espacios, del elemento en cuestión.</li>
</ul>
<h2 id="Ejemplo">Ejemplo</h2>
<pre class="brush: js">let elm = document.getElementById('item');
if(elm.className === 'active'){
elm.className = 'inactive';
} else {
elm.className = 'active';
}</pre>
<h2 id="Notes" name="Notes">Notas</h2>
<p>El nombre <code>className</code> es utilizado para esta propiedad en lugar de <code>class</code> para evitar conflictos con la palabra clave "class" existente en muchos de los lenguages que son usados para manipular el DOM.</p>
<p><code>className</code> también puede ser una instancia de {{domxref("SVGAnimatedString")}} si <code>element</code> es un {{domxref("SVGElement")}}. Es mejor de obtener/establecer la propiedad <code>className</code> de un elemento utilizando {{domxref("Element.getAttribute")}} y {{domxref("Element.setAttribute")}} si estás tratando con elementos SVG.</p>
<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre>
<p> </p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Observaciones</th>
</tr>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
<td>{{Spec2("DOM4")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
<td>{{Spec2("DOM2 HTML")}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Chrome para Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>{{domxref("element.classList")}}</li>
</ul>
|
