Cómo usar JavaScript para cambiar div backgroundColor

6 minutos de lectura

Cómo usar JavaScript para cambiar div backgroundColor
larguirucho

El HTML a continuación:

<div id="category">

  <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 mouse sobre el contenido de div, entonces es backgroundColor y h2 (dentro de este div) backgroundColor cambia (al igual que el CSS: pasar el mouse)

Sé que esto puede usar CSS (: hover) para hacer esto en un navegador moderno, pero IE6 no funciona.

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

Editar: cómo cambiar el color de fondo h2 también

  • ¿Por qué rechazar herramientas como jquery que facilitan el trabajo y hacen más fiable el resultado?

    – solo alguien

    09 dic. 09 a las 16:17

  • Si bien JQuery es una excelente herramienta, ¿qué pasaría si por alguna razón jQuery dejara de existir? En mi opinión, es genial si alguien quiere aprender el idioma en lugar de la herramienta. 🙂

    – Prozaker

    15 oct.

  • @Prozaker – ¿Y si algún día internet dejara de existir? Al igual que haces la suposición básica de que Internet existe, puedes asumir que jQuery existe. De hecho, usted no tiene que asumir. Simplemente puede descargarlo e incluirlo con su código fuente. Ahora, las probabilidades de que desaparezca son al menos tan bajas como las probabilidades de que desaparezca el resto de su código, excepto que no realmente, porque existen tantos millones de copias de jQuery que el planeta mismo tendría que explotar para borrar jQuery de manera confiable. existencia.

    – El arte de la guerra

    15 oct.

Cómo usar JavaScript para cambiar div backgroundColor
jacob relkin

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";
};

  • ¿También es posible cambiar el color de fondo de los divs por CLASE? Parece que .style solo funciona cuando se obtiene el elemento por id.

    – La lucha es real

    23 oct.

Cómo usar JavaScript para cambiar div backgroundColor
nemisj

Agregar/cambiar el estilo de los elementos en el código es una mala práctica. Hoy quieres cambiar el fondo color y mañana te gustaría cambiar de fondo imagen y después de mañana decidiste que también sería bueno cambiar el frontera.

Editar el código cada vez solo porque los requisitos de diseño cambian es una molestia. Además, si su proyecto crecerá, cambiar los archivos js será aún más doloroso. Más código, más dolor.

Trate de eliminar el uso de estilos codificados, esto le ahorrará tiempo y, si lo hace bien, podría pedirle a otra persona que haga la tarea de “cambiar de color”.

Entonces, en lugar de cambiar las propiedades directas del estilo, puede agregar/eliminar clases CSS en los nodos. En su caso específico, solo necesita hacer esto para el nodo principal: “div” y luego, diseñar los subnodos a través de CSS. Por lo tanto, no es necesario aplicar una propiedad de estilo específica a DIV y H2.

Un punto más de recomendación. Trate de no conectar nodos codificados, pero use algo de semántica para hacerlo. Por ejemplo: “Para agregar eventos a todos los nodos que tienen la clase ‘contenido’.

En conclusión, aquí está el código que usaría para tales 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 tu CSS debería ser así:

.content {
    background-color: blue;
}

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

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

Cómo usar JavaScript para cambiar div backgroundColor
atrapameifyoutry

Acceda al elemento que desea cambiar a través del DOM, por ejemplo con document.getElementById() o vía this en su controlador de eventos, y cambie el estilo en ese elemento:

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

EDITAR

Puedes usar getElementsByTagName también, ejemplo (no probado):

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'); }
    }
}

<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>

Cómo usar JavaScript para cambiar div backgroundColor
Las

Este puede ser un poco extraño porque realmente no soy un programador serio y estoy descubriendo cosas en la programación de la forma en que se inventó la penicilina: puro accidente. Entonces, ¿cómo cambiar un elemento al pasar el mouse? Utilizar el :hover atributo al igual que con a elementos.

Ejemplo:

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

Esto cambia cualquier div con la clase classname tener un fondo negro en mousover. Básicamente puedes cambiar cualquier atributo. Probado en IE y Firefox

¡Feliz programación!

Cómo usar JavaScript para cambiar div backgroundColor
lizwi

Es muy simple, solo use una función en javaScript y llámela onclick

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

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

Cómo usar JavaScript para cambiar div backgroundColor
jhurshman

Si está dispuesto a insertar nodos no semánticos en su documento, puede hacerlo de una manera compatible con IE solo con CSS envolviendo sus divs en etiquetas A falsas.

<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>

.

¿Ha sido útil esta solución?