[SOLUCIONADO] Modificar estilo de una clase con js.

guillox · #1 (**permalink**) 07/02/2013, 08:46

Resulta que quiero que al posicionarme sobre un div que es una clase y este cambie el color de fondo, pero como es una clase y se repite varias veces en toda la pagina, tambien cambien de color el resto de los divs de la misma clase..
Crei que podia hacerlo mediante estilos pero solo funciona con el div en el que estoy posicionado y por este motivo intente con js pero continuo teniendo el mismo problema.
ej
<script type='javascript'>
funcion cambiarcolor(div){
div.style.backgroundColor="#000000";
}
</script>
<div class='div1' onMouseover='cambiarcolor(this)'></div>
....
<div class='div1' onMouseover='cambiarcolor(this)'></div>

Es decir si me posiciono sobre el div1 cambien el color de fondode todos los divs1 de la pagina.

No conozco mucho de js por lo que les pido una ayudita..

emprear · #2 (**permalink**) 07/02/2013, 09:01

Tenes que recorrer todos los divs de tu página, detectar cuales tienen la calse y modificar en estos la propiedad que requieras

un ejemplo hecho para otra cosa, pero el principio es el mismo

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Contar elementos</title>
<script type="text/javascript">
//<![CDATA[
// con una clase específica
var tags_li = [];
function dli(clase) {
var tags_li=document.getElementsByTagName('li');
var i;
for (i=0; i<tags_li.length; i++) {
if (tags_li[i].className=='abc') {
tags_li[i].style.background = 'lime';
 
}
}
 
}
//]]>
</script>
</head>
<body onload="dli('abc')">
<div>
<ul>
<li class="a">1</li>
<li class="abc">xllsls</li>
<li class="a">3</li>
<li class="abc">4</li>
<li class="a">5</li>
<li class="a">6</li>
</ul>
</div>
</body>
</html>

mirá como funciona
getElementsByTagName

SAludos

Panino5001 · #3 (**permalink**) 07/02/2013, 10:32

Otra manera:

Código PHP:

  <!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>...</title> 
<style> 
.div1{ background:red; color:white;} 
</style> 
<script type="text/javascript"> 
function addCss(cssCode,i) {  
    control=document.getElementById(i)  
    if(control)  
        document.getElementsByTagName("head")[0].removeChild(control)  
    var styleElement = document.createElement("style");  
    styleElement.type = "text/css";  
    if (styleElement.styleSheet) {  
        styleElement.styleSheet.cssText = cssCode;  
    } else {  
        styleElement.appendChild(document.createTextNode(cssCode))  
    }  
    styleElement.id =i;  
    document.getElementsByTagName("head")[0].appendChild(styleElement);  
}  
</script> 
 
</head> 
 
<body> 
<div class="div1">Cuando despertó, el dinosaurio todavía estaba allí.</div> 
<script type="text/javascript"> 
addCss('.div1{ width:200px; height:200px;background:black; color:red; padding:10px; cursor:pointer}.div1:hover{background:red; color:white;}','esdin1'); 
</script> 
</body> 
</html>

guillox · #4 (**permalink**) 07/02/2013, 11:56

Gracias, pude hacerlo andar... aprendi algo nuevo...