propiedades - Cambiar la clase de un elemento con JavaScript
javascript cambiar atributo de una clase (25)
¿Cómo puedo cambiar una clase de un elemento HTML en respuesta a un evento onClick usando JavaScript?
Cambia la clase de un elemento en JavaScript de vainilla con el soporte de IE6
Puede intentar usar la propiedad de attributes nodo para mantener la compatibilidad con navegadores antiguos, incluso IE6:
function getClassNode(element) {
for (var i = element.attributes.length; i--;)
if (element.attributes[i].nodeName === ''class'')
return element.attributes[i];
}
function removeClass(classNode, className) {
var index, classList = classNode.value.split('' '');
if ((index = classList.indexOf(className)) > -1) {
classList.splice(index, 1);
classNode.value = classList.join('' '');
}
}
function hasClass(classNode, className) {
return classNode.value.indexOf(className) > -1;
}
function addClass(classNode, className) {
if (!hasClass(classNode, className))
classNode.value += '' '' + className;
}
document.getElementById(''message'').addEventListener(''click'', function() {
var classNode = getClassNode(this);
var className = hasClass(classNode, ''red'') && ''blue'' || ''red'';
removeClass(classNode, ''red'');
removeClass(classNode, ''blue'');
addClass(classNode, className);
})
.red {
color: red;
}
.red:before {
content: ''I am red! '';
}
.red:after {
content: '' again'';
}
.blue {
color: blue;
}
.blue:before {
content: ''I am blue! ''
}
<span id="message" class="">Click me</span>
Técnicas HTML5 modernas para cambiar clases
Los navegadores modernos han agregado classList que proporciona métodos para facilitar la manipulación de clases sin necesidad de una biblioteca:
document.getElementById("MyElement").classList.add(''MyClass'');
document.getElementById("MyElement").classList.remove(''MyClass'');
if ( document.getElementById("MyElement").classList.contains(''MyClass'') )
document.getElementById("MyElement").classList.toggle(''MyClass'');
Desafortunadamente, estos no funcionan en Internet Explorer antes de v10, aunque hay un complemento para agregar soporte para IE8 e IE9, disponible en classList . Sin embargo, es cada vez más supported .
Solución simple de navegador cruzado
La forma estándar de JavaScript para seleccionar un elemento es usar document.getElementById("Id") , que es lo que usan los siguientes ejemplos: por supuesto, puede obtener elementos de otras maneras, y en la situación correcta puede usar this en this lugar. Sin embargo, entrar en detalles sobre esto está más allá del alcance de la respuesta.
Para cambiar todas las clases de un elemento:
Para reemplazar todas las clases existentes con una o más clases nuevas, establezca el atributo className:
document.getElementById("MyElement").className = "MyClass";
(Puede usar una lista delimitada por espacios para aplicar varias clases).
Para agregar una clase adicional a un elemento:
Para agregar una clase a un elemento, sin eliminar / afectar los valores existentes, agregue un espacio y el nuevo nombre de clase, así:
document.getElementById("MyElement").className += " MyClass";
Para eliminar una clase de un elemento:
Para eliminar una sola clase de un elemento, sin afectar a otras clases potenciales, se requiere una simple sustitución de expresiones regulares:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|/s)MyClass(?!/S)/g , '''' )
/* Code wrapped for readability - above is all one statement */
Una explicación de esta expresión regular es la siguiente:
(?:^|/s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!/S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
El indicador g le dice al reemplazo que se repita según sea necesario, en caso de que el nombre de la clase se haya agregado varias veces.
Para verificar si una clase ya está aplicada a un elemento:
La misma expresión regular utilizada anteriormente para eliminar una clase también se puede usar para verificar si existe una clase en particular:
if ( document.getElementById("MyElement").className.match(/(?:^|/s)MyClass(?!/S)/) )
Asignando estas acciones a los eventos onclick:
Si bien es posible escribir JavaScript directamente dentro de los atributos de eventos HTML (como onclick="this.className+='' MyClass''" ), este no es un comportamiento recomendado. Especialmente en aplicaciones más grandes, se logra un código más mantenible al separar el marcado HTML de la lógica de interacción de JavaScript.
El primer paso para lograr esto es crear una función y llamar a la función en el atributo onclick, por ejemplo:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(No es necesario tener este código en las etiquetas de secuencia de comandos, esto es simplemente por brevedad del ejemplo, e incluir el JavaScript en un archivo distinto puede ser más apropiado).
El segundo paso es mover el evento onclick fuera del HTML y a JavaScript, por ejemplo, usando addEventListener
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( ''click'', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
(Tenga en cuenta que la parte window.onload es necesaria para que el contenido de esa función se ejecute después de que el HTML haya terminado de cargarse; sin esto, MyElement podría no existir cuando se llame al código JavaScript, por lo que esa línea fallaría).
Marcos y bibliotecas de JavaScript
El código anterior es todo en JavaScript estándar, sin embargo, es una práctica común utilizar un marco o una biblioteca para simplificar las tareas comunes, así como beneficiarse de errores corregidos y casos de borde que puede que no piense al escribir su código.
Si bien algunas personas consideran excesivo agregar un marco de ~ 50 KB simplemente para cambiar una clase, si está haciendo una cantidad sustancial de trabajo de JavaScript, o cualquier cosa que pueda tener un comportamiento inusual en varios navegadores, vale la pena considerarlo.
(En términos generales, una biblioteca es un conjunto de herramientas diseñadas para una tarea específica, mientras que un marco generalmente contiene varias bibliotecas y realiza un conjunto completo de funciones).
Los ejemplos anteriores se han reproducido a continuación utilizando jQuery , probablemente la biblioteca de JavaScript más utilizada (aunque también hay otros que vale la pena investigar).
(Tenga en cuenta que $ aquí es el objeto jQuery).
Clases cambiantes con jQuery:
$(''#MyElement'').addClass(''MyClass'');
$(''#MyElement'').removeClass(''MyClass'');
if ( $(''#MyElement'').hasClass(''MyClass'') )
Además, jQuery proporciona un acceso directo para agregar una clase si no se aplica, o eliminar una clase que sí lo hace:
$(''#MyElement'').toggleClass(''MyClass'');
Asignando una función a un evento de clic con jQuery:
$(''#MyElement'').click(changeClass);
o, sin necesidad de una identificación:
$('':button:contains(My Button)'').click(changeClass);
classList DOM API:
Una manera muy conveniente de agregar y eliminar clases es el classList DOM API. Esta API nos permite seleccionar todas las clases de un elemento DOM específico para modificar la lista usando javascript. Por ejemplo:
const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>
Podemos observar en el registro que estamos recuperando un objeto no solo con las clases del elemento, sino también con muchos métodos y propiedades auxiliares. Este objeto se hereda de la interfaz DOMTokenList , una interfaz que se utiliza en el DOM para representar un conjunto de tokens separados por espacios (como clases).
Ejemplo:
const el = document.getElementById(''container'');
function addClass () {
el.classList.add(''newclass'');
}
function replaceClass () {
el.classList.replace(''foo'', ''newFoo'');
}
function removeClass () {
el.classList.remove(''bar'');
}
button{
margin: 20px;
}
.foo{
color: red;
}
.newFoo {
color: blue;
}
.bar{
background-color:powderblue;
}
.newclass{
border: 2px solid green;
}
<div class="foo bar" id="container">
"Sed ut perspiciatis unde omnis
iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas
</div>
<button onclick="addClass()">AddClass</button>
<button onclick="replaceClass()">ReplaceClass</button>
<button onclick="removeClass()">removeClass</button>
Aquí está el código jQuery simple para hacer eso.
$(".class1").click(function(argument) {
$(".parentclass").removeClass("classtoremove");
setTimeout(function (argument) {
$(".parentclass").addClass("classtoadd");
}, 100);
});
Aquí,
- Class1 es un oyente para un evento.
- La clase padre es la clase que alberga la clase que desea cambiar.
- Classtoremove es la vieja clase que tienes.
- Clase para agregar es la nueva clase que desea agregar.
- 100 es el retardo de tiempo de espera durante el cual se cambia la clase.
Buena suerte.
Aquí está mi versión, en pleno funcionamiento:
function addHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
obj.className += " " + classname
}
function removeHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
var classes = ""+obj.className
while (classes.indexOf(classname)>-1) {
classes = classes.replace (classname, "")
}
obj.className = classes
}
Uso:
<tr onmouseover=''addHTMLClass(this,"clsSelected")''
onmouseout=''removeHTMLClass(this,"clsSelected")'' >
Aquí hay una toggleClass para alternar / agregar / eliminar una clase en un elemento:
// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
var matchRegExp = new RegExp(''(?:^|//s)'' + theClass + ''(?!//S)'', ''g'');
var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));
elem.className=elem.className.replace(matchRegExp, ''''); // clear all
if (add) elem.className += '' '' + theClass;
}
ver jsfiddle
También vea mi respuesta here para crear una nueva clase dinámicamente
Bien, creo que en este caso debería usar jQuery o escribir sus propios métodos en javascript puro, mi preferencia es agregar mis propios métodos en lugar de inyectar todo jQuery a mi aplicación si no lo necesito por otras razones.
Me gustaría hacer algo como a continuación como métodos para mi marco javascript para agregar algunas funcionalidades que manejan agregar clases, eliminar clases, etc. similares a jQuery, esto es totalmente compatible con IE9 +, también mi código está escrito en ES6, por lo que necesita para asegurarnos de que su navegador lo admita o usted use algo como babel, de lo contrario debe usar la sintaxis de ES5 en su código, también de esta manera, encontramos el elemento a través de ID, lo que significa que el elemento debe tener una ID para seleccionar:
//simple javascript utils for class management in ES6
var classUtil = {
addClass: (id, cl) => {
document.getElementById(id).classList.add(cl);
},
removeClass: (id, cl) => {
document.getElementById(id).classList.remove(cl);
},
hasClass: (id, cl) => {
return document.getElementById(id).classList.contains(cl);
},
toggleClass: (id, cl) => {
document.getElementById(id).classList.toggle(cl);
}
}
y simplemente puede usarlos como se muestra a continuación, imagine que su elemento tiene id de ''id'' y clase de ''clase'', asegúrese de pasarlos como una cadena, puede usar la utilidad como se muestra a continuación:
classUtil.addClass(''myId'', ''myClass'');
classUtil.removeClass(''myId'', ''myClass'');
classUtil.hasClass(''myId'', ''myClass'');
classUtil.toggleClass(''myId'', ''myClass'');
Código JavaScript de trabajo:
<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
function div_add_class()
{
document.getElementById("div_add").className += " div_added";
}
function div_replace_class()
{
document.getElementById("div_replace").className = "div_replaced";
}
function div_remove_class()
{
document.getElementById("div_remove").className = "";
}
</script>
Puede descargar un código de trabajo desde este enlace .
Cambie la clase CSS de un elemento con JavaScript en ASP.NET :
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
lbSave.Attributes.Add("onmouseover", "this.className = ''LinkButtonStyle1''")
lbSave.Attributes.Add("onmouseout", "this.className = ''LinkButtonStyle''")
lbCancel.Attributes.Add("onmouseover", "this.className = ''LinkButtonStyle1''")
lbCancel.Attributes.Add("onmouseout", "this.className = ''LinkButtonStyle''")
End If
End Sub
En uno de mis proyectos anteriores que no usaba jQuery, construí las siguientes funciones para agregar, eliminar y verificar si el elemento tiene clase:
function hasClass(ele, cls) {
return ele.className.match(new RegExp(''(//s|^)'' + cls + ''(//s|$)''));
}
function addClass(ele, cls) {
if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp(''(//s|^)'' + cls + ''(//s|$)'');
ele.className = ele.className.replace(reg, '' '');
}
}
Entonces, por ejemplo, si quiero que onclick agregue alguna clase, el botón puedo usar esto:
<script type="text/javascript">
function changeClass(btn, cls) {
if(!hasClass(btn, cls)) {
addClass(btn, cls);
}
}
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>
Por ahora, seguro que sería mejor usar jQuery.
Esto es más fácil con una biblioteca como jQuery:
<input type="button" onClick="javascript:test_byid();" value="id=''second''" />
<script>
function test_byid()
{
$("#second").toggleClass("highlight");
}
</script>
Esto es trabajo para mí:
function setCSS(eleID) {
var currTabElem = document.getElementById(eleID);
currTabElem.setAttribute("class", "some_class_name");
currTabElem.setAttribute("className", "some_class_name");
}
La línea
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(//bMyClass/b/'','''')
debiera ser:
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(''//bMyClass/b/'','''');
No se ofenda, pero es fácil cambiar de clase sobre la marcha, ya que obliga al intérprete de CSS a volver a calcular la presentación visual de toda la página web.
La razón es que es casi imposible para el intérprete de CSS saber si se puede cambiar alguna herencia o cascada, por lo que la respuesta corta es:
Nunca cambies el nombre de clase sobre la marcha! -)
Pero normalmente solo necesitarás cambiar una propiedad o dos, y eso se implementa fácilmente:
function highlight(elm){
elm.style.backgroundColor ="#345";
elm.style.color = "#fff";
}
Puedes usar node.className así:
document.getElementById(''foo'').className = ''bar'';
Esto debería funcionar en IE5.5 y hasta según PPK .
Solo para agregar información de otro marco popular, Google Closures, vea su clase dom/classes :
goog.dom.classes.add(element, var_args)
goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)
goog.dom.classes.remove(element, var_args)
Una opción para seleccionar el elemento es usar goog.dom.query con un selector CSS3:
var myElement = goog.dom.query("#MyElement")[0];
Solo pensé en tirar esto en:
function inArray(val, ary){
for(var i=0,l=ary.length; i<l; i++){
if(ary[i] === val){
return true;
}
}
return false;
}
function removeClassName(classNameS, fromElement){
var x = classNameS.split(//s/), s = fromElement.className.split(//s/), r = [];
for(var i=0,l=s.length; i<l; i++){
if(!iA(s[i], x))r.push(s[i]);
}
fromElement.className = r.join('' '');
}
function addClassName(classNameS, toElement){
var s = toElement.className.split(//s/);
s.push(c); toElement.className = s.join('' '');
}
También podría extender el objeto HTMLElement para agregar métodos para agregar, eliminar, alternar y verificar las clases ( gist ):
HTMLElement = typeof(HTMLElement) != ''undefiend'' ? HTMLElement : Element;
HTMLElement.prototype.addClass = function(string) {
if (!(string instanceof Array)) {
string = string.split('' '');
}
for(var i = 0, len = string.length; i < len; ++i) {
if (string[i] && !new RegExp(''(//s+|^)'' + string[i] + ''(//s+|$)'').test(this.className)) {
this.className = this.className.trim() + '' '' + string[i];
}
}
}
HTMLElement.prototype.removeClass = function(string) {
if (!(string instanceof Array)) {
string = string.split('' '');
}
for(var i = 0, len = string.length; i < len; ++i) {
this.className = this.className.replace(new RegExp(''(//s+|^)'' + string[i] + ''(//s+|$)''), '' '').trim();
}
}
HTMLElement.prototype.toggleClass = function(string) {
if (string) {
if (new RegExp(''(//s+|^)'' + string + ''(//s+|$)'').test(this.className)) {
this.className = this.className.replace(new RegExp(''(//s+|^)'' + string + ''(//s+|$)''), '' '').trim();
} else {
this.className = this.className.trim() + '' '' + string;
}
}
}
HTMLElement.prototype.hasClass = function(string) {
return string && new RegExp(''(//s+|^)'' + string + ''(//s+|$)'').test(this.className);
}
Y luego solo use así (al hacer clic, se agregará o eliminará la clase):
document.getElementById(''yourElementId'').onclick = function() {
this.toggleClass(''active'');
}
Aquí está la demo .
También podrías simplemente hacer:
document.getElementById(''id'').classList.add(''class''); document.getElementById(''id'').classList.remove(''class'');
Y para alternar una clase (eliminar si existe, si no, agregarlo):
document.getElementById(''id'').classList.toggle(''class'');
Un par de notas menores y retoques en las expresiones regulares anteriores:
Querrá hacerlo globalmente en caso de que la lista de clases tenga el nombre de la clase más de una vez. Y, probablemente querrá eliminar los espacios de los extremos de la lista de clases y convertir varios espacios en un solo espacio para evitar la ejecución de espacios. Ninguna de estas cosas debería ser un problema si el único código que contiene los nombres de clase usa la expresión regular que se encuentra a continuación y elimina un nombre antes de agregarlo. Pero. Bueno, quién sabe quién podría estar usando la lista de nombres de clase.
Esta expresión regular no distingue entre mayúsculas y minúsculas, por lo que los errores en los nombres de clase pueden aparecer antes de que el código se use en un navegador que no se preocupa por los casos en los nombres de clase.
var s = "testing one four one two";
var cls = "one";
var rg = new RegExp("(^|//s+)" + cls + "(//s+|$)", ''ig'');
alert("[" + s.replace(rg, '' '') + "]");
var cls = "test";
var rg = new RegExp("(^|//s+)" + cls + "(//s+|$)", ''ig'');
alert("[" + s.replace(rg, '' '') + "]");
var cls = "testing";
var rg = new RegExp("(^|//s+)" + cls + "(//s+|$)", ''ig'');
alert("[" + s.replace(rg, '' '') + "]");
var cls = "tWo";
var rg = new RegExp("(^|//s+)" + cls + "(//s+|$)", ''ig'');
alert("[" + s.replace(rg, '' '') + "]");
Usando código JavaScript puro:
function hasClass(ele, cls) {
return ele.className.match(new RegExp(''(//s|^)'' + cls + ''(//s|$)''));
}
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp(''(//s|^)'' + cls + ''(//s|$)'');
ele.className = ele.className.replace(reg, '' '');
}
}
function replaceClass(ele, oldClass, newClass){
if(hasClass(ele, oldClass)){
removeClass(ele, oldClass);
addClass(ele, newClass);
}
return;
}
function toggleClass(ele, cls1, cls2){
if(hasClass(ele, cls1)){
replaceClass(ele, cls1, cls2);
}else if(hasClass(ele, cls2)){
replaceClass(ele, cls2, cls1);
}else{
addClass(ele, cls1);
}
}
Usaría jQuery y escribiría algo como esto:
jQuery(function($) {
$("#some-element").click(function() {
$(this).toggleClass("clicked");
});
});
Este código agrega una función a la que se debe llamar cuando se hace clic en un elemento de id -some-element . La función agrega el clic al atributo de clase del elemento si aún no es parte de él, y lo elimina si está allí.
Sí, necesita agregar una referencia a la biblioteca jQuery en su página para usar este código, pero al menos puede estar seguro de que la mayoría de las funciones en la biblioteca funcionarán en casi todos los navegadores modernos, y le ahorrará tiempo implementando Tu propio código para hacer lo mismo.
Gracias
Uso las siguientes funciones de JavaScript de vainilla en mi código. Usan expresiones regulares e indexOf pero no requieren la cita de caracteres especiales en expresiones regulares.
function addClass(el, cn) {
var c0 = (" " + el.className + " ").replace(//s+/g, " "),
c1 = (" " + cn + " ").replace(//s+/g, " ");
if (c0.indexOf(c1) < 0) {
el.className = (c0 + c1).replace(//s+/g, " ").replace(/^ | $/g, "");
}
}
function delClass(el, cn) {
var c0 = (" " + el.className + " ").replace(//s+/g, " "),
c1 = (" " + cn + " ").replace(//s+/g, " ");
if (c0.indexOf(c1) >= 0) {
el.className = c0.replace(c1, " ").replace(//s+/g, " ").replace(/^ | $/g, "");
}
}
También puede usar element.classList en navegadores modernos.
Wow, sorprendido de que haya tantas respuestas excesivas aquí ...
<div class="firstClass" onclick="this.className=''secondClass''">
solo diga myElement.classList="new-class" menos que necesite mantener otras clases existentes, en cuyo caso puede usar los métodos classList.add, .remove .
var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");
goButton.addEventListener("click", function() {
divOne.classList="blue";
});
div{
min-height:48px;
min-width:48px;
}
.bordered{
border: 1px solid black;
}
.green{
background:green;
}
.blue{
background: blue;
}
<button id="go">Change Class</button>
<div id="one" class="bordered green">
</div>