Verwendung von JavaScript zum Ändern von div backgroundColor

Question

Der untenstehende HTML-Code:

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

Wenn der Inhalt des div mit der Maus überfahren wird, ändern sich die backgroundColor und die h2 (innerhalb dieses div) backgroundColor (genau wie die CSS: hover)

Ich weiß, dass dies in modernen Browsern mit CSS (: hover) möglich ist, aber im IE6 funktioniert es nicht.

Wie kann man JavaScript (nicht jQuery oder ein anderes JS-Framework) verwenden, um dies zu tun?

Bearbeiten:wie man die h2 backgroundColor zu ändern

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

Das Hinzufügen/Ändern des Stils der Elemente im Code ist eine schlechte Praxis. Heute möchten Sie den Hintergrund ändern Farbe und morgen möchten Sie den Hintergrund ändern Bild und übermorgen haben Sie beschlossen, dass es auch schön wäre, die Grenze .

Es ist mühsam, den Code jedes Mal zu bearbeiten, nur weil sich die Designanforderungen ändern. Und wenn Ihr Projekt wächst, wird das Ändern von js-Dateien noch mühsamer. Mehr Code, mehr Schmerz.

Versuchen Sie, die Verwendung von hart kodierten Stilen zu vermeiden, das spart Zeit und, wenn Sie es richtig machen, können Sie die Aufgabe "Farbe ändern" an jemand anderen vergeben.

Anstatt also direkte Eigenschaften des Stils zu ändern, können Sie CSS-Klassen zu Knoten hinzufügen/entfernen. In Ihrem speziellen Fall müssen Sie dies nur für den übergeordneten Knoten "div" tun und dann die Unterknoten per CSS gestalten. Es ist also nicht notwendig, spezifische Stileigenschaften auf DIV und H2 anzuwenden.

Ein weiterer Empfehlungspunkt. Versuchen Sie, Knoten nicht hartkodiert zu verbinden, sondern verwenden Sie dafür eine Semantik. Zum Beispiel: "Um Ereignisse zu allen Knoten hinzuzufügen, die die Klasse 'content' haben.

Abschließend möchte ich noch den Code nennen, den ich für solche Aufgaben verwenden würde:

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

Und so sollte auch Ihr CSS sein:

.content {
    background-color: blue;
}

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

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

Answer 3

Greifen Sie über das DOM auf das Element zu, das Sie ändern möchten, zum Beispiel mit document.getElementById() oder über this in Ihrem Event-Handler und ändern Sie den Stil in diesem Element:

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

EDITAR

Sie können verwenden getElementsByTagName zu, (ungetestetes) Beispiel:

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

Es ist sehr einfach, verwenden Sie eine Funktion auf JavaScript und rufen Sie es onclick

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

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