como puedo cambiar la clase en todos los div con javascript

jor_0203 · #1 (**permalink**) 17/12/2011, 09:45

como puedo cambiar la clase en todos los divs con javascript, sin tener que estar repitiendo el código, este código funciona bien, lo que no me gusta es que tengo que repetir el código, ya que el id es único para cosa, entonces no se como puede jalar todo divs y ponerlo solo a una clase.
ojala alguien me pueda ayudar

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript">
function camcio_clase_masivo(){
document.getElementById("d").className="a2";
}   
</script>
<style type="text/css">
<!--
.a {
    background-color: #FFCC33;
    border: thin solid #000000;
}
 
.a2 {
    background-color: #999999;
    
}
-->
</style>
</head>
<body>
<div id="d" class="a">Como cambiar todos los class="a" con javascript</div>
<div class="a">Como cambiar todos los class="a" con javascript</div>
<div class="a">Como cambiar todos los class="a" con javascript</div>
<div class="a">Como cambiar todos los class="a" con javascript</div>
<div class="a">Como cambiar todos los class="a" con javascript</div>
<input name="" type="button" value="cambia la class para todos" onclick="camcio_clase_masivo()" />
</body>
</html>

zerokilled · #2 (**permalink**) 17/12/2011, 10:46

buenas,
intenta con el método getElementsByClassName el cual te devuelve una colección de elementos con la clase que indiques. luego lo iteras en un bucle para trabajar con ellos.

Trublux · #3 (**permalink**) 17/12/2011, 15:32

Hola.
Puedes hacerlo con JQuery aunque si no lo usas para más cosas es mejor hacerlo con JavaScript "puro":

Código Javascript:

Ver original$(function(){
    $('div').addClass('a2');
});

IsaBelM · #4 (**permalink**) 17/12/2011, 15:59

Cita:

Iniciado por zerokilled

buenas,
intenta con el método getElementsByClassName el cual te devuelve una colección de elementos con la clase que indiques. luego lo iteras en un bucle para trabajar con ellos.

el problema es que getElementsByClassName() no existe para ie y habría que crear una función para tal caso. así que yo propondría usar querySelectorAll()

JesusCova · #5 (**permalink**) 17/12/2011, 16:11

jQuery amigo es muy sencillo asi

Código Javascript:

Ver original$(document).ready {
   $("div").attr ("class", "a");
}

y listo eso s todo

jor_0203 · #6 (**permalink**) 18/12/2011, 09:16

hola isabel lo hice así pero no funciona en explorer
que puedo hacer

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript">
function desaparecer(pes) {
    document.getElementById(pes.id).className=" a2";
var capas = document.getElementsByClassName('a');
    for(var i = 0; capas[i]; i++)
    {
        capas[i].style.display = "none";
    
    }
    
}
</script>
<style type="text/css">
<!--
.a{
    background-color: #FFCC33;
    border: thin solid #000000; 
}
.a2{
    background-color: #0033CC;
    border: thin solid #000000;
    display:block;
    
}
-->
</style>
</head>
<body >
<div id="jjj" class="a" onclick="desaparecer(this)">1 cambiar y da click </div>
<div id="dos" class="a" onclick="desaparecer(this)">2 cambiar y da click</div>
<div id="tres" class="a" onclick="desaparecer(this)">3 cambiar y da click</div>
<div id="cuatro" class="a" onclick="desaparecer(this)">4 cambiar y da click</div>
<div id="cinco" class="a" onclick="desaparecer(this)">5 cambiar y da click</div>
 
</body>
</html>

zerokilled · #7 (**permalink**) 18/12/2011, 10:06

sigue la sugerencia de @isabelm, utiliza querySelectorAll. al menos desde iexplorer8 esta disponible al igual que en otros navegadores (firefox, chrome).

jor_0203 · #8 (**permalink**) 18/12/2011, 14:20

Cita:

Iniciado por zerokilled

sigue la sugerencia de @isabelm, utiliza querySelectorAll. al menos desde iexplorer8 esta disponible al igual que en otros navegadores (firefox, chrome).

no hay otra forma de hacerlo, para que agarre todos los navegadores
con otro código
pero que haga lo mismo pero en todos loa navegadores

zerokilled · #9 (**permalink**) 18/12/2011, 14:59

¿a qué le llamas todos los navegadores? versiones. en lo personal, en el caso de iexplorer no veo porque darle soporte a las versiones iexplorer7 y anteriores. de todos modos, mirad este sitio el cual muestra una tabla de los navegadores y versiones que soportan ciertas características. por ejemplo, ahí puedes ver la compatibilidad de getelementsbyclassname y queryselectorall. http://caniuse.com/

por otro lado, cuando necesites compatibilidad porque alguna versión o navegador no soporte algo, trata buscar un polyfill. por ejemplo, polyfill getElementsByClassName.

emprear · #10 (**permalink**) 18/12/2011, 15:01

probá con esta, funciona en IE8+ y el resto de los browsers

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar estilo en clases</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.uno {
color: blue;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function procesarDivs(){
var losdivs = document.getElementsByTagName("div");
for (var i=0; i < losdivs.length; i++){
   if (losdivs[i].getAttribute('class') == 'uno'){
    losdivs[i].style.color ='red';
   }
}
}
//]]>
</script>
</head>
<body>
<div class="uno">
Texto 1
</div>
<div class="dos">
Texto 2
</div>
<div class="uno">
Texto 3
</div>
<div class="dos">
Texto 4
</div>
<p class="uno">
Texto 5 (en un párrafo)
</p>
<p>
<button onclick="procesarDivs();">buscar divs con class uno y cambiar el color</button>
</p>
</body>
</html>

Saludos

_cronos2 · #11 (**permalink**) 18/12/2011, 15:22

En una sóla línea:

Código Javascript:

Ver original[].slice.call(document.querySelectorAll('div')).forEach(function(div){ div.className += ' clase'; });

Saludos.

IsaBelM · #12 (**permalink**) 18/12/2011, 15:27

Cita:

Iniciado por _cronos2

En una sóla línea:

Código Javascript:

Ver original[].slice.call(document.querySelectorAll('div')).forEach(function(div){ div.className += ' clase'; });

Saludos.

ni que te cobraran por líneas de código

_cronos2 · #13 (**permalink**) 18/12/2011, 16:56

Cita:

Iniciado por IsaBelM

ni que te cobraran por líneas de código

Era para que vea que no hay tanta complicación

<offtopic> Creo que la Merkel ha comentado algo sobre poner un impuesto por esto también

</offtopic>

jor_0203 · #14 (**permalink**) 18/12/2011, 18:19

Cita:

Iniciado por _cronos2

En una sóla línea:

Código Javascript:

Ver original[].slice.call(document.querySelectorAll('div')).forEach(function(div){ div.className += ' clase'; });

Saludos.

pero esto como la uso
con el ultimo ejemplo que mande
mil gracias

emprear · #15 (**permalink**) 18/12/2011, 18:38

La función cambia cualquier elemento que tenga la clase .uno, asignándole la clase .nuevocolor (esta última tine que estar en tu css)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar estilo en clases</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.uno {
color: blue;
}
.nuevocolor {
color: green;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function procesarSelector(){
[].slice.call(document.querySelectorAll('.uno')).forEach(function(elemento){ 
    elemento.className += ' nuevocolor'; 
});
}
//]]>
</script>
</head>
<body>
<div class="uno">
Texto 1
</div>
<div class="dos">
Texto 2
</div>
<div class="uno">
Texto 3
</div>
<div class="dos">
Texto 4
</div>
<p class="uno">
Texto 5 (en un párrafo)
</p>
<p>
<button onclick="procesarSelector();">buscar tags con class uno y cambiar el color</button>
</p> 
</body>
</html>

Podrías hacer que cambie todos las etiquetas "div", pero es má flexible si le das una clase específica a los elementos que querés cambiar.

Saludos

jor_0203 · #16 (**permalink**) 18/12/2011, 19:02

Cita:

Iniciado por emprear

La función cambia cualquier elemento que tenga la clase .uno, asignándole la clase .nuevocolor (esta última tine que estar en tu css)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar estilo en clases</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.uno {
color: blue;
}
.nuevocolor {
color: green;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function procesarSelector(){
[].slice.call(document.querySelectorAll('.uno')).forEach(function(elemento){ 
    elemento.className += ' nuevocolor'; 
});
}
//]]>
</script>
</head>
<body>
<div class="uno">
Texto 1
</div>
<div class="dos">
Texto 2
</div>
<div class="uno">
Texto 3
</div>
<div class="dos">
Texto 4
</div>
<p class="uno">
Texto 5 (en un párrafo)
</p>
<p>
<button onclick="procesarSelector();">buscar tags con class uno y cambiar el color</button>
</p> 
</body>
</html>

Podrías hacer que cambie todos las etiquetas "div", pero es má flexible si le das una clase específica a los elementos que querés cambiar.

Saludos

lo voy a probar hoy
mil gracias estoy impresionado
que dios te bendiga

jor_0203 · #17 (**permalink**) 19/12/2011, 01:40

Cita:

Iniciado por emprear

La función cambia cualquier elemento que tenga la clase .uno, asignándole la clase .nuevocolor (esta última tine que estar en tu css)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar estilo en clases</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.uno {
color: blue;
}
.nuevocolor {
color: green;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function procesarSelector(){
[].slice.call(document.querySelectorAll('.uno')).forEach(function(elemento){ 
    elemento.className += ' nuevocolor'; 
});
}
//]]>
</script>
</head>
<body>
<div class="uno">
Texto 1
</div>
<div class="dos">
Texto 2
</div>
<div class="uno">
Texto 3
</div>
<div class="dos">
Texto 4
</div>
<p class="uno">
Texto 5 (en un párrafo)
</p>
<p>
<button onclick="procesarSelector();">buscar tags con class uno y cambiar el color</button>
</p> 
</body>
</html>

Podrías hacer que cambie todos las etiquetas "div", pero es má flexible si le das una clase específica a los elementos que querés cambiar.

Saludos

en explorer no funciona

IsaBelM · #18 (**permalink**) 19/12/2011, 07:40

forEach no existe en ie y para no complicar mucho mas la cosa

Cita:

function procesarSelector(){
selector = document.querySelectorAll('.uno');
for(elemento in selector) {
selector[elemento].className += ' nuevocolor';
}
}

_cronos2 · #19 (**permalink**) 19/12/2011, 08:45

Cita:

Iniciado por jor_0203

en explorer no funciona

Cita:

Iniciado por IsaBelM

y para no complicar mucho mas la cosa

Muerte a IE.

IsaBelM · #20 (**permalink**) 19/12/2011, 08:57

Cita:

Iniciado por _cronos2

Muerte a IE.

o al menos que se suicide, para que no quede en nuestras conciencia

parece que el problema está en que no existe el método forEach(), tampoco getElementsByClassName. que co** muerte a ie!!

emprear · #21 (**permalink**) 19/12/2011, 11:27

entonces usá
http://www.forosdelweb.com/f13/como-...4/#post4071601

Solo NO funciona en IE7
El 2º método funciona a partir de IE9

_cronos2 · #22 (**permalink**) 19/12/2011, 11:37

Cita:

Iniciado por emprear

entonces usá
http://www.forosdelweb.com/f13/como-...4/#post4071601

Solo NO funciona en IE7
El 2º método funciona a partir de IE9

¿Y por qué no funciona en IE7? No le veo nada raro

Saludos (:

caricatos · #23 (**permalink**) 19/12/2011, 11:44

Hola:

Cita:

Iniciado por _cronos2

¿Y por qué no funciona en IE7? No le veo nada raro

Saludos (:

Código:

   if (losdivs[i].getAttribute('class') == 'uno'){
    losdivs[i].style.color ='red';

Estoy seguro que el problem es : losdivs[i].getAttribute('class')...

Algo que funciona desde tiempos inmemoriales es:

losdivs[i].className...

Saludos

zerokilled · #24 (**permalink**) 19/12/2011, 11:45

Cita:

¿Y por qué no funciona en IE7? No le veo nada raro

Saludos (:

si bien recuerdo, hasta la versión iexplorer7, el método getAttribute/setAttribute estaba mal implementado. particularmente, en lugar del método recibir el nombre de un atributo tal cual, parece que admitía más el nombre de una propiedad. de modo que en lugar de pasar como valor "class", tenias que pasar el equivalente en javascript: "className". de todos modos, se puede corregir simplemente prescindiendo de los métodos por el uso directo de las propiedades. de momento es lo único que veo que pudiera fallar.

emprear · #25 (**permalink**) 19/12/2011, 11:49

IE7
El objeto no acepta la propiedad o el método 'querySelectorAll'

IE8
Array.prototype.slice: 'this' no es un objeto JavaScript

Vi un poco por arriba posibles soluciones, pero nuestro "código de una línea" se desvanece.

Saludos

emprear · #26 (**permalink**) 19/12/2011, 11:58

Correcta la observación de @caricatos

con
function procesarDivs(){
var losdivs = document.getElementsByTagName("div");
for (var i=0; i < losdivs.length; i++){
if (losdivs[i].className == 'uno'){
losdivs[i].style.color ='red';
}
}
}

en substitución de

if (losdivs[i].getAttribute('class') == 'uno'){

funciona correctamente incluso en IE7

En cuanto a

[].slice.call(document.querySelectorAll('.uno')).for Each(function(elemento){ elemento.className += ' nuevocolor'; });

los errores son los que señalé antes

Saludos

IsaBelM · #27 (**permalink**) 19/12/2011, 12:28

lo que comenta zerokilled

Cita:

alert(typeof(losdivs[i].getAttribute('className'))) // string
alert(typeof(losdivs[i].getAttribute('class'))) // objeto

_cronos2 · #28 (**permalink**) 19/12/2011, 12:41

Cita:

Iniciado por caricatos

Hola:

Código:

   if (losdivs[i].getAttribute('class') == 'uno'){
    losdivs[i].style.color ='red';

Estoy seguro que el problem es : losdivs[i].getAttribute('class')...

Algo que funciona desde tiempos inmemoriales es:

losdivs[i].className...

Saludos

Cita:

Iniciado por zerokilled

si bien recuerdo, hasta la versión iexplorer7, el método getAttribute/setAttribute estaba mal implementado. particularmente, en lugar del método recibir el nombre de un atributo tal cual, parece que admitía más el nombre de una propiedad. de modo que en lugar de pasar como valor "class", tenias que pasar el equivalente en javascript: "className". de todos modos, se puede corregir simplemente prescindiendo de los métodos por el uso directo de las propiedades. de momento es lo único que veo que pudiera fallar.

Lo que me imaginaba, getAttribute, no podía ser otra cosa >.<

Cita:

Iniciado por emprear

En cuanto a

[].slice.call(document.querySelectorAll('.uno')).for Each(function(elemento){ elemento.className += ' nuevocolor'; });

los errores son los que señalé antes

Saludos

Bueno, esto estaba claro desde un principio que no iba a funcionar por debajo de IE8, y por el forEach diría que ni siquiera en este.
Sin embargo me extraña el error de que "this no es un objeto JavaScript". Según yo lo entiendo, el error se produce en el Array.prototype.slice, que es para pasar de NodeList a array. Claro, las implementaciones del DOM son vendor specific, así que podría ser que algo fallara por la manera en que está construido; sin embargo si es IE8 estoy seguro de que funciona, o al menos funcionaba.
La verdad no sé dónde está el error, pero teniendo en cuenta que es IE, vete tú a saber

ryugen · #29 (**permalink**) 19/12/2011, 12:59

Soy de la idea de siempre ver como personas que ya han resuelto el problema, lo han hecho

Código Javascript:

Ver originaladdClass: function( value ) {
        var classNames, i, l, elem,
            setClass, c, cl;
 
        if ( jQuery.isFunction( value ) ) {
            return this.each(function( j ) {
                jQuery( this ).addClass( value.call(this, j, this.className) );
            });
        }
 
        if ( value && typeof value === "string" ) {
            classNames = value.split( rspace );
 
            for ( i = 0, l = this.length; i < l; i++ ) {
                elem = this[ i ];
 
                if ( elem.nodeType === 1 ) {
                    if ( !elem.className && classNames.length === 1 ) {
                        elem.className = value;
 
                    } else {
                        setClass = " " + elem.className + " ";
 
                        for ( c = 0, cl = classNames.length; c < cl; c++ ) {
                            if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
                                setClass += classNames[ c ] + " ";
                            }
                        }
                        elem.className = jQuery.trim( setClass );
                    }
                }
            }
        }
 
        return this;
    }

Esa es la solucion de jquery, donde value, es la clase que queremos agregar y this es un arreglo con los elementos que queremos modificar.

Obviamente que el script tiene chequeos que de acuerdo a ciertas pre-condiciones o no podemos obviar. Por ejemplo que value sea un string.