Cómo utilizar JavaScript para cambiar color de fondo div

Question

El código HTML siguiente:

<div id="catestory">

  <div class="content">
     <h2>some title here</h2>
      <p>some content here</p>
  </div>

  <div class="content">
     <h2>some title here</h2>
      <p>some content here</p>
  </div>

  <div class="content">
     <h2>some title here</h2>
      <p>some content here</p>
  </div>

</div>

Cuando pasa el ratón el contenido del div entonces es backgroundColor y el H2 (dentro de este div) backgroundColor cambio (al igual que el CSS: flotar)

Sé que esto puede utilizar CSS (: flotar). Hacerlo en los navegadores modernos, pero IE6 does't de trabajo

¿Cómo usar JavaScript (no jQuery u otro marco de JS) para hacer esto?

Editar: cómo cambiar el backgroundColor h2 demasiado

Answer 1

var div = document.getElementById( 'div_id' );
div.onmouseover = function() {
  this.style.backgroundColor = 'green';
  var h2s = this.getElementsByTagName( 'h2' );
  h2s[0].style.backgroundColor = 'blue';
};
div.onmouseout = function() {
  this.style.backgroundColor = 'transparent';
  var h2s = this.getElementsByTagName( 'h2' );
  h2s[0].style.backgroundColor = 'transparent';
};

Answer 2

Agregación / cambio de estilo de los elementos de código es una mala práctica. Hoy en día se quiere cambiar el fondo Color y mañana les gustaría cambiar el fondo imagen y pasado mañana se decidió que también sería bueno cambiar el fronteriza .

Edición del código cada vez solamente porque los requisitos de diseño que cambia es un dolor. Además, si su proyecto va a crecer, cambiantes js archivos serán aún más dolor. Más código, más dolor.

Trate de eliminar el uso de estilos cifrados duros, esto le ahorrará tiempo y, si lo haces bien, que se puede pedir para hacer la tarea "cambiar color" a otra persona.

Así que, en lugar de cambiar las propiedades directas de estilo, puede añadir / quitar clases CSS en los nodos. En su caso específico, sólo tiene que hacer esto por nodo padre - "div" y, a continuación, el estilo de los subnodos a través de CSS. Por lo tanto no hay necesidad de aplicar las propiedades de estilo específico para DIV y H2.

Un punto más recomendación. Trate de no conectar los nodos codificado, pero el uso de algunos semántica para hacer eso. Por ejemplo: "Para añadir eventos a todos los nodos que tienen clase 'contenido'

.

En conclusión, aquí está el código que yo usaría para estas tareas:

//for adding a css class
function onOver(node){
   node.className = node.className + ' Hover';
}

//for removing a css class
function onOut(node){
    node.className = node.className.replace('Hover','');
}

function connect(node,event,fnc){
    if(node.addEventListener){
        node.addEventListener(event.substring(2,event.length),function(){
            fnc(node);
        },false);
    }else if(node.attachEvent){
        node.attachEvent(event,function(){
            fnc(node);
        });
    }
}

// run this one when window is loaded
var divs = document.getElementsByTagName("div");
for(var i=0,div;div =divs[i];i++){
    if(div.className.match('content')){
        connect(div,'onmouseover',onOver);
        connect(div,'onmouseout',onOut);
    }
}

Y CSS whould ser así:

.content {
    background-color: blue;
}

.content.Hover{
    background-color: red;
}

.content.Hover h2{
    background-color : yellow;
}

Answer 3

El acceso al elemento que desea cambiar a través del DOM, por ejemplo, con document.getElementById() oa través de this en el controlador de eventos, y cambiar el estilo de ese elemento:

document.getElementById("MyHeader").style.backgroundColor='red';

Editar

Puede utilizar getElementsByTagName también, (no probado) ejemplo:

function colorElementAndH2(elem, colorElem, colorH2) {
    // change element background color
    elem.style.backgroundColor = colorElem;
    // color first contained h2
    var h2s = elem.getElementsByTagName("h2");
    if (h2s.length > 0)
    {
        hs2[0].style.backgroundColor = colorH2;
    }
}

// add event handlers when complete document has been loaded
window.onload = function() {
    // add to _all_ divs (not sure if this is what you want though)
    var elems = document.getElementsByTagName("div");
    for(i = 0; i < elems.length; ++i)
    {
        elems[i].onmouseover = function() { colorElementAndH2(this, 'red', 'blue'); }
        elems[i].onmouseout = function() { colorElementAndH2(this, 'transparent', 'transparent'); }
    }
}

Answer 4

<script type="text/javascript">
 function enter(elem){
     elem.style.backgroundColor = '#FF0000';
 }

 function leave(elem){
     elem.style.backgroundColor = '#FFFFFF';
 }
</script>
 <div onmouseover="enter(this)" onmouseout="leave(this)">
       Some Text
 </div>

Answer 5

Éste podría ser un poco raro porque yo realmente no soy un programador serio y estoy descubriendo cosas en la programación de la forma en que se inventó la penicilina - pura casualidad. Entonces, ¿cómo cambiar un elemento en mouseover? Utilice el atributo :hover al igual que con los elementos a.

Ejemplo:

div.classname:hover
{
    background-color: black;
}

Esto cambia cualquier div con el classname clase para tener un fondo negro en la mousover. Es, básicamente, puede cambiar cualquier atributo. Probado en IE y Firefox

programación feliz!

Answer 6

Si usted está dispuesto a insertar nodos no semánticas en su documento, usted puede hacer esto de una manera compatible con IE CSS sólo envolviendo su divs en las etiquetas falsas a.

<style type="text/css">
  .content {
    background: #ccc;
  }

  .fakeLink { /* This is to make the link not look like one */
    cursor: default;
    text-decoration: none;
    color: #000;
  }

  a.fakeLink:hover .content {
    background: #000;
    color: #fff;
  }

</style>
<div id="catestory">

  <a href="#" onclick="return false();" class="fakeLink">
    <div class="content">
      <h2>some title here</h2>
      <p>some content here</p>
    </div>
  </a>

  <a href="#" onclick="return false();" class="fakeLink">
    <div class="content">
      <h2>some title here</h2>
      <p>some content here</p>
    </div>
  </a>

  <a href="#" onclick="return false();" class="fakeLink">
    <div class="content">
      <h2>some title here</h2>
      <p>some content here</p>
    </div>
  </a>

</div>

Answer 7

Para hacer esto sin jQuery o cualquier otra biblioteca, tendrá que adjuntar eventos onMouseOver y onMouseOut a cada div y cambiar el estilo de los controladores de eventos.

Por ejemplo:

var category = document.getElementById("catestory");
for (var child = category.firstChild; child != null; child = child.nextSibling) {
    if (child.nodeType == 1 && child.className == "content") {
        child.onmouseover = function() {
            this.style.backgroundColor = "#FF0000";
        }

        child.onmouseout = function() {
            // Set to transparent to let the original background show through.
            this.style.backgroundColor = "transparent"; 
        }
    }
}

Si su h2 no ha puesto su propio fondo, el fondo se mostrará a través div y colorearlo también.

Answer 8

Puede probar este guión. :)

    <html>
    <head>
    <title>Div BG color</title>
    <script type="text/javascript">
    function Off(idecko)
    {
    document.getElementById(idecko).style.background="rgba(0,0,0,0)"; <!--- Default --->
    }
    function cOn(idecko)
    {
    document.getElementById(idecko).style.background="rgb(0,60,255)"; <!--- New content color --->
    }
    function hOn(idecko)
    {
    document.getElementById(idecko).style.background="rgb(60,255,0)"; <!--- New h2 color --->
    }
    </script>
    </head>
    <body>

    <div id="catestory">

        <div class="content" id="myid1" onmouseover="cOn('myid1'); hOn('h21')" onmouseout="Off('myid1'); Off('h21')">
          <h2 id="h21">some title here</h2>
          <p>some content here</p>
        </div>

        <div class="content" id="myid2" onmouseover="cOn('myid2'); hOn('h22')" onmouseout="Off('myid2'); Off('h22')">
          <h2 id="h22">some title here</h2>
          <p>some content here</p>
        </div>

        <div class="content" id="myid3" onmouseover="cOn('myid3'); hOn('h23')" onmouseout="Off('myid3'); Off('h23')">
          <h2 id="h23">some title here</h2>
          <p>some content here</p>
        </div>

    </div>

    </body>
<html>

Answer 9

Es muy simple sólo tiene que utilizar una función de JavaScript y llamarlo onclick

   <script type="text/javascript">
            function change()
            {
            document.getElementById("catestory").style.backgroundColor="#666666";
            }
            </script>

    <a href="#" onclick="change()">Change Bacckground Color</a>