JavaScript verwenden div Hintergrundfarbe zu ändern

Question

Der folgende HTML-Code:

<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 den Inhalt des div Mouseover dann ist es background und h2 (in diesem div) backgroundÄnderung (genau wie die CSS: Hover)

Ich weiß, das CSS verwenden können (: hover). Dies in modernen Browser zu tun, aber IE6 does't Arbeit

Wie verwenden JavaScript (nicht jQuery oder andere JS-Framework), dies zu tun?

Edit: wie auch die h2 Backgroundcolor ä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

Hinzufügen / Ändern Stil der Elemente in Code ist eine schlechte Praxis. Heute werden Sie den Hintergrund ändern möchten Farbe und morgen Sie möchten den Hintergrund ändern Bild und nach morgen entschieden, dass es auch schön wäre, die Grenze zu ändern .

dem Code bearbeiten jede Zeit nur, weil die Design-Anforderungen ändern, ist ein Schmerz. Auch, wenn Ihr Projekt wird wachsen, ändert js Dateien werden noch mehr Schmerzen. Mehr Code, mehr Schmerzen.

Versuchen Verwendung von harten codierten Arten zu beseitigen, wird diese Zeit sparen und, wenn man es richtig tun, könnten Sie bitten, die „Change-Farbe“ Aufgabe an jemand anderen zu tun.

Also, statt der direkten Eigenschaften des Stils ändern, können Sie CSS-Klassen auf Knoten hinzufügen / entfernen. In Ihrem speziellen Fall müssen Sie nur diesen Knoten für Eltern tun - „div“ und dann, Stil der untergeordneten Knoten durch CSS. Also keine Notwendigkeit, gelten bestimmte Stil-Eigenschaft auf DIV und H2.

Eine weitere Empfehlung Punkt. Versuchen Sie, nicht zu verbinden Knoten fest einprogrammiert, aber einige semantische verwenden, das zu tun. Zum Beispiel: „Um Ereignisse an alle Knoten hinzuzufügen, die Klasse‚Inhalt‘haben

.

Abschließend hier ist 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 CSS whould so aussehen:

.content {
    background-color: blue;
}

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

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

Answer 3

Besuchen Sie das Element, das Sie über das DOM ändern mögen, zum Beispiel mit document.getElementById() oder über this in Ihren Event-Handler, und ändern Sie den Stil in diesem Elemente:

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

Bearbeiten

Sie können mit getElementsByTagName auch (nicht getestet) 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

Dies könnte ein bisschen komisch, weil ich wirklich keine ernsthaften Programmierer und ich Dinge bin Entdeckung bei der Programmierung die Art und Weise Penicillin erfunden wurde - reiner Zufall. So, wie ein Element mit der Maus darüber ändern? Verwenden Sie das Attribut :hover wie bei a Elemente.

Beispiel:

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

Dies ändert sich jede div mit der Klasse classname einen schwarzen Hintergrund auf mousover haben. Sie können grundsätzlich beliebige Attribute ändern. Getestet in IE und Firefox

Happy Programmierung!

Answer 6

Wenn Sie bereit zum Einfügen von nicht-semantischen Knoten in Ihr Dokument ist, können Sie dies in einer CSS-nur IE-kompatibel Weise durch Ihre divs in fälschen Tags Verpackung.

<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

Um dies zu tun, ohne jQuery oder jede andere Bibliothek, werden Sie onMouseOver und onMouseOut Ereignisse zu jedem div müssen befestigen und den Stil in den Event-Handler ä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 Ihre h2 hat seinen eigenen Hintergrund nicht gesetzt ist, wird der div Hintergrund durchscheinen und es zu färben.

Answer 8

Sie können dieses Skript versuchen. :)

    <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

Es ist sehr einfach nur eine JavaScript-Funktion verwenden und es nennt Onclick

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

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