con - remove class javascript
¿Cómo agrego una clase a un elemento dado? (22)
Añadir clase
Compatible con cruces
En el siguiente ejemplo, agregamos un nombre de
classnameal elemento<body>. Esto es compatible con IE-8.var a = document.body; a.classList ? a.classList.add(''classname'') : a.className += '' classname'';Esta es la taquigrafía de lo siguiente.
var a = document.body; if (a.classList) { a.classList.add(''wait''); } else { a.className += '' wait''; }
Actuación
Si está más preocupado por el rendimiento sobre la compatibilidad cruzada, puede reducirlo a lo siguiente, que es un 4% más rápido.
var z = document.body; document.body.classList.add(''wait'');
Conveniencia
Alternativamente, podrías usar jQuery pero el rendimiento resultante es significativamente más lento. 94% más lento según jsPerf
$(''body'').addClass(''wait'');
Quitando la clase
Actuación
Usar jQuery de forma selectiva es el mejor método para eliminar una clase si le preocupa el rendimiento
var a = document.body, c = '' classname''; $(a).removeClass(c);
Sin jQuery es un 32% más lento.
var a = document.body, c = '' classname''; a.className = a.className.replace( c, '''' ); a.className = a.className + c;
Referencias
Utilizando prototipo
Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")
Usando YUI
YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")
Tengo un elemento que ya tiene una clase:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
Ahora quiero crear una función de Javascript que agregue una clase al div (no reemplazar, pero agregar).
¿Cómo puedo hacer eso?
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 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).
Agregue un espacio más el nombre de su nueva clase a la propiedad className del elemento. Primero, ponga una id en el elemento para que pueda obtener una referencia fácilmente.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
Entonces
var d = document.getElementById("div1");
d.className += " otherclass";
Véase también element.className en MDN .
Creo que es mejor usar JavaScript puro, que podemos ejecutar en el DOM del navegador.
Aquí está la forma funcional de usarlo. He usado ES6 pero siéntase libre de usar ES5 y la expresión de función o definición de función, lo que se adapte a su Guía de Estilo de JavaScript.
''use strict''
const oldAdd = (element, className) => {
let classes = element.className.split('' '')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join('' '')
}
const oldRemove = (element, className) => {
let classes = element.className.split('' '')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join('' '')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}
Cuando el trabajo que estoy haciendo no justifica el uso de una biblioteca, uso estas dos funciones:
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '''' ) {
classname = '' ''+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "//s?//b"+classname+"//b", "g" );
cn = cn.replace( rxp, '''' );
element.className = cn;
}
Este código js funciona para mí
proporciona reemplazo de nombre de clase
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute(''class'');
var Ta = cssCNs.split('' ''); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == ''visible''){
Ta[i] = ''hidden'';
break;// quit for loop
}
else if (Ta[i] == ''hidden''){
Ta[i] = ''visible'';
break;// quit for loop
}
}
DDCdiv.setAttribute(''class'',Ta.join('' '') ); // Join array with space and set class name
Para agregar solo usar
var cssCNs = DDCdiv.getAttribute(''class'');
var Ta = cssCNs.split('' ''); //split into an array
Ta.push(''New class name'');
// Ta.push(''Another class name'');//etc...
DDCdiv.setAttribute(''class'',Ta.join('' '') ); // Join array with space and set class name
Para eliminar el uso
var cssCNs = DDCdiv.getAttribute(''class'');
var Ta = cssCNs.split('' ''); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == ''visible''){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute(''class'',Ta.join('' '') ); // Join array with space and set class name
Espero que esto sea útil para sombody
La forma más sencilla de hacer esto sin ningún marco es usar el método element.classList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");
Edit: Y si quieres eliminar la clase de un elemento -
element.classList.remove("otherclass");
Prefiero no tener que agregar ningún espacio vacío y duplicar el manejo de las entradas a mí mismo (lo cual es necesario cuando se utiliza el enfoque document.className ). Existen algunas limitaciones del navegador , pero puede polyfills utilizando polyfills .
Muestra con JS puro. En el primer ejemplo obtenemos el id de nuestro elemento y agregamos, por ejemplo, 2 clases.
document.addEventListener(''DOMContentLoaded'', function() {
document.getElementsById(''tabGroup'').className = "anyClass1 anyClass2";
})
En el segundo ejemplo obtenemos el nombre de clase del elemento y agregamos 1 más.
document.addEventListener(''DOMContentLoaded'', function() {
document.getElementsByClassName(''tabGroup'')[0].className = "tabGroup ready";
})
Otro enfoque para agregar la clase al elemento usando JavaScript puro
Para añadir clase:
document.getElementById("div1").classList.add("classToBeAdded");
Para eliminar clase:
document.getElementById("div1").classList.remove("classToBeRemoved");
Para agregar, eliminar o verificar clases de elementos de una manera sencilla:
var uclass = {
exists: function(elem,className){var p = new RegExp(''(^| )''+className+''( |$)'');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += '' ''+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp(''(^| )''+className+''( |$)'');c = c.replace(p,'' '').replace(/ /g,'' '');elem.className = c;}
};
var elem = document.getElementById(''someElem'');
//Add a class, only if not exists yet.
uclass.add(elem,''someClass'');
//Remove class
uclass.remove(elem,''someClass'');
Para aquellos que usan Lodash y desean actualizar la cadena className :
// get element reference
var elem = document.getElementById(''myElement'');
// add some classes. Eg. ''nav'' and ''nav header''
elem.className = _.chain(elem.className).split(/[/s]+/).union([''nav'',''navHeader'']).join('' '').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[/s]+/).difference([''nav'',''navHeader'']).join('' '').value()
Puede usar el API querySelector para seleccionar su elemento y luego crear una función con el elemento y el nuevo nombre de clase como parámetros. Usando la lista de clases para los navegadores modernos, o bien para IE8. Luego puedes llamar a la función después de un evento.
//select the dom element
var addClassVar = document.querySelector(''.someclass'');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += '' '' + className;
}
};
//call the function
addClass(addClassVar, ''newClass'');
Puede usar el método classList.add O classList.remove para agregar / eliminar una clase de un elemento.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")
El código anterior agregará (y NO reemplazará) una clase "anyclass" para nameElem. De manera similar, puede usar el método classList.remove () para eliminar una clase.
nameElem.classList.remove("anyclss")
Puedes usar un enfoque moderno similar a jQuery
Si necesita cambiar solo un elemento, el primero que JS encontrará en DOM, puede usar esto:
document.querySelector(''.someclass'').className += " red";
.red {
color: red;
}
<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
Tenga en cuenta dejar un espacio antes del nombre de la clase.
Si tiene varias clases en las que desea agregar una nueva clase, puede usarla de esta manera
document.querySelectorAll(''.someclass'').forEach(function(element) {
element.className += " red";
});
.red {
color: red;
}
<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
Sé que IE9 se apaga oficialmente y podemos lograrlo con element.classList como muchos dijeron anteriormente, pero solo traté de aprender cómo funciona sin classList con la ayuda de muchas respuestas anteriores, podría aprenderlo.
El código a continuación extiende muchas de las respuestas anteriores y las mejora evitando agregar clases duplicadas.
function addClass(element,className){
var classArray = className.split('' '');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector(''#getbyid''),''3 4 5 5 5'');
Si no desea utilizar jQuery y desea admitir navegadores más antiguos:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
Solo para detallar lo que otros han dicho, varias clases de CSS se combinan en una sola cadena, delimitada por espacios. Por lo tanto, si quisieras codificarlo, simplemente se vería así:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
Desde allí puede derivar fácilmente el javascript necesario para agregar una nueva clase ... simplemente agregue un espacio seguido de la nueva clase a la propiedad className del elemento. Sabiendo esto, también puede escribir una función para eliminar una clase más tarde si es necesario.
Suponiendo que está haciendo más que solo agregar esta clase (por ejemplo, tiene solicitudes asíncronas y así sucesivamente), recomendaría una biblioteca como Prototype o jQuery .
Esto hará que todo lo que necesite hacer (incluido esto) sea muy simple.
Entonces, digamos que tienes jQuery en tu página ahora, podrías usar un código como este para agregar un nombre de clase a un elemento (en carga, en este caso):
$(document).ready( function() {
$(''#div1'').addClass( ''some_other_class'' );
} );
Echa un vistazo al navegador jQuery API para otras cosas.
Yo también creo que la forma más rápida es usar Element.prototype.classList como en es5: document.querySelector(".my.super-class").classList.add(''new-class'') pero en ie8 no hay tal cosa como Element.prototype.classList, de todos modos puede rellenarlo con este fragmento de código (puede editarlo y mejorarlo):
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split('' ''))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join('' '').replace(/ +/, '' '')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? ''remove'' : ''add''](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, ''classList'', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}
encuentre el elemento de destino "d" como desee y luego:
d.className += '' additionalClass''; //note the space
puede envolver eso en formas más inteligentes para verificar la preexistencia, y verificar los requisitos de espacio, etc.
primero, dale al div una id. Luego, llame a la función appendClass:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>