Comment utiliser JavaScript pour changer la couleur de fond div

Question

Le code HTML ci-dessous:

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

Lorsque mouseover le contenu div il est backgroundColor et h2 (dans cette div) changement backgroundColor (comme le CSS: hover)

Je sais que cela peut utiliser CSS (: hover). De le faire dans le navigateur moderne, mais IE6 does't travail

Comment utiliser JavaScript (non jQuery ou un autre cadre JS) pour le faire?

Edit: comment changer le backgroundColor h2 trop

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

Ajout / changement de style des éléments dans le code est une mauvaise pratique. Aujourd'hui, vous voulez changer l'arrière-plan couleur et demain vous souhaitez modifier fond l'image et après-demain vous avez décidé que ce serait aussi agréable de changer le frontière .

Modification du code seulement chaque fois parce que les exigences de conception change est une douleur. En outre, si votre projet se développera, les fichiers de changements seront encore plus de douleur. code plus, plus de douleur.

Essayez de vous éliminer l'utilisation de styles codés en dur, cela permettra d'économiser du temps et, si vous le faites correctement, vous pouvez demander de faire la tâche « changer de couleur » à quelqu'un d'autre.

Alors, au lieu de changer les propriétés directes de style, vous pouvez ajouter / supprimer des classes CSS sur les nœuds. Dans votre cas, il vous suffit de le faire pour le nœud parent - « div » puis, le style de la sous-noeuds par CSS. Donc pas besoin d'appliquer une propriété de style à DIV et H2.

Un point de recommandation. Essayez de ne pas connecter les noeuds codées en dur, mais utiliser une sémantique pour le faire. Par exemple: « Pour ajouter des événements à tous les nœuds qui ont la classe « contenu »

.

En conclusion, voici le code que j'utiliser pour ces tâches:

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

Et vous CSS whould comme ceci:

.content {
    background-color: blue;
}

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

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

Answer 3

Accédez à l'élément que vous souhaitez modifier via le DOM, par exemple avec document.getElementById() ou via this dans votre gestionnaire d'événements, et changer le style dans cet élément:

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

EDIT

Vous pouvez utiliser getElementsByTagName aussi, (non testé) par exemple:

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

Celui-ci pourrait être un peu bizarre parce que je ne suis vraiment pas un programmeur sérieux et je découvre les choses dans la programmation de la pénicilline manière a été inventé - pur hasard. Alors, comment changer un élément sur mouseover? Utilisez l'attribut :hover comme avec des éléments a.

Exemple:

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

Cela change tout div la classname de classe d'avoir un fond noir sur mousover. Vous pouvez changer fondamentalement tout attribut. Testé dans IE et Firefox

Bonne programmation!

Answer 6

Si vous êtes prêt à insérer des nœuds non-sémantiques dans votre document, vous pouvez le faire dans un CSS seule manière IE compatible en enveloppant vos divs dans les balises faux 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

Pour faire cela sans jQuery ou toute autre bibliothèque, vous devrez joindre les événements onMouseOver et onMouseOut à chaque div et changer le style dans les gestionnaires d'événements.

Par exemple:

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 votre h2 n'a pas encore défini son propre fond, l'arrière-plan div va montrer à travers et la couleur aussi.

Answer 8

Vous pouvez essayer ce script. :)

    <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

Il est très simple il suffit d'utiliser une fonction sur javaScript et l'appeler onclick

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

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