wake-up-neo.com

So verwenden Sie JavaScript, um die Hintergrundfarbe des Hintergrunds zu ändern

Der HTML-Code unten:

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

Wenn Sie mit der Maus über den Inhalt von div gehen, ändern Sie backgroundColor und h2 (innerhalb dieses div) backgroundColor (genau wie CSS: hover). 

Ich weiß, dass dies CSS (: hover) verwenden kann, um dies in einem modernen Browser zu tun, aber IE6 funktioniert nicht.

Wie benutze ich JavaScript (nicht jQuery oder ein anderes JS-Framework), um dies zu tun?

Bearbeiten: wie man auch die h2 backgroundColor ändert

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

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

Das Bearbeiten des Codes jedes Mal, nur weil sich die Designanforderungen ändern, ist ein Schmerz. Wenn Ihr Projekt wachsen wird, wird das Ändern von JS-Dateien noch mehr Schmerzen verursachen. Mehr Code, mehr Schmerz. 

Versuchen Sie, die Verwendung hartcodierter Stile zu eliminieren. Dadurch sparen Sie Zeit. Wenn Sie es richtig machen, könnten Sie die Aufgabe "Farbe ändern" mit einer anderen Person erledigen. 

Anstatt die direkten Stileigenschaften 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 tun - "div" und dann die Unterknoten durch CSS formatieren. Daher müssen Sie keine spezifische Stileigenschaft auf DIV und H2 anwenden.

Noch ein Empfehlungspunkt. Versuchen Sie, Knoten nicht fest zu verknüpfen, sondern verwenden Sie dazu Semantik. Zum Beispiel: "Hinzufügen von Ereignissen zu allen Knoten, die die Klasse 'Inhalt' haben. 

Zusammenfassend ist hier der Code, 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 Sie sollten CSS so sein:

.content {
    background-color: blue;
}

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

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

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

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

EDIT

Sie können auch getElementsByTagName verwenden. (Ungeprüft) 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'); }
    }
}
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

Dies könnte ein bisschen komisch sein, weil ich wirklich kein seriöser Programmierer bin und beim Programmieren die Dinge entdeckt, wie Penicillin erfunden wurde. So ändern Sie ein Element bei Mouseover? Verwenden Sie das :hover-Attribut wie bei a-Elementen.

Beispiel:

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

Dadurch wird jede div mit der Klasse classname so geändert, dass sie beim Mauszeiger einen schwarzen Hintergrund hat. Sie können grundsätzlich jedes Attribut ändern. Getestet in IE und Firefox

Viel Spaß beim Programmieren!

1
Las

Es ist sehr einfach, verwenden Sie einfach eine Funktion in JavaScript und nennen Sie es onclick 

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

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

Um dies ohne jQuery oder eine andere Bibliothek zu tun, müssen Sie jedem DivX-Ereignis onMouseOver- und onMouseOut -Ereignisse zuordnen und den Stil in den Event-Handlern ändern.

Zum Beispiel:

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

Wenn Ihr h2 keinen eigenen Hintergrund festgelegt hat, wird der Hintergrund der Hintergrundfarbe angezeigt und auch farbig dargestellt.

0
Jon Benedicto

Sie können dieses Skript ausprobieren. :)

    <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

Wenn Sie bereit sind, nicht-semantische Knoten in Ihr Dokument einzufügen, können Sie dies auf eine reine CSS-kompatible IE-kompatible Weise tun, indem Sie die divs in gefälschte A-Tags einschließen.

<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