web-dev-qa-db-fra.com

Comment utiliser JavaScript pour changer la couleur d'arrière-plan div

Le 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 la souris survole le contenu de div, alors c'est backgroundColor et le h2 (à l'intérieur de cette div) backgroundColor change (exactement comme CSS: hover) 

Je sais que cela peut utiliser CSS (hover) pour le faire dans un navigateur moderne, mais IE6 ne fonctionne pas.

Comment utiliser JavaScript (pas jQuery ou autre framework JS) pour le faire?

Edit: comment changer la couleur de fond h2 aussi

javascriptbackground-color
26
lanqy
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';
};
60
Jacob Relkin

Ajouter/changer le style des éléments dans le code est une mauvaise pratique. Aujourd'hui, vous voulez changer le fond couleur et demain, vous voulez changer le fond image et après-demain, vous avez décidé qu'il serait aussi agréable de changer le bordure . 

La modification du code à chaque fois seulement parce que les exigences de conception changent est une douleur. En outre, si votre projet se développe, la modification des fichiers JS sera encore plus pénible. Plus de code, plus de douleur. 

Essayez d'éliminer l'utilisation de styles codés en dur, cela vous fera gagner du temps et, si vous le faites correctement, vous pouvez demander à effectuer la tâche de "changement de couleur" pour quelqu'un d'autre. 

Ainsi, au lieu de modifier les propriétés directes du style, vous pouvez ajouter/supprimer des classes CSS sur les nœuds. Dans votre cas spécifique, vous devez uniquement effectuer cette opération pour le nœud parent - "div", puis attribuez un style aux sous-nœuds via CSS. Donc, pas besoin d'appliquer une propriété de style spécifique à DIV et à H2.

Un autre point de recommandation. Essayez de ne pas connecter les nœuds en dur, mais utilisez une sémantique pour le faire. Par exemple: "Pour ajouter des événements à tous les nœuds ayant la classe 'contenu'. 

En conclusion, voici le code que j'utiliserais pour de telles 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 serait comme ça:

.content {
    background-color: blue;
}

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

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

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 modifiez le style de cet élément:

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

MODIFIER

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

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'); }
    }
}
5
catchmeifyoutry
<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>
3
Vincent Ramdhanie

Celui-ci est peut-être un peu bizarre parce que je ne suis vraiment pas un programmeur sérieux et que je découvre des choses en programmant la manière dont la pénicilline a été inventée - un pur accident. Alors, comment changer un élément au passage de la souris? Utilisez l'attribut :hover comme avec les éléments a.

Exemple:

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

Cela change n'importe quelle div avec la classe classname pour avoir un fond noir sur mousover. Vous pouvez fondamentalement changer n'importe quel attribut. Testé dans IE et Firefox

Bonne programmation!

1
Las

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

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

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

Pour ce faire sans jQuery ni aucune autre bibliothèque, vous devez attacher les événements onMouseOver et onMouseOut à chaque div et modifier 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 défini son propre arrière-plan, l’arrière-plan div sera visible et coloré.

0
Jon Benedicto

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>
0
G-Phys

Si vous souhaitez insérer des nœuds non sémantiques dans votre document, vous pouvez le faire d'une manière compatible avec IE uniquement avec CSS en encapsulant vos divs dans de fausses balises 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>
0
jhurshman