JavaScript verwendet div background

Question

Der folgende HTML-Code zu ändern:

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

Ich weiß, dass dies CSS (: Hover) im modernen Browser verwenden kann, aber IE6 funktioniert nicht.

Wie funktioniert JavaScript (nicht jQuery oder ein anderes JS-Framework)?

Edit: wie das h2 background ändern zu

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

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

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

EDIT

können Sie getElementsByTagName verwenden, (ungetestet) 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 3

Um dies zu tun, ohne jQuery oder jede andere Bibliothek, die Sie benötigen onMouseOver und onMouseOut Ereignisse zu jedem div und ändern Sie den Stil für den Fall befestigen Handler.

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 seinen eigenen Hintergrund nicht gesetzt, wird der div Hintergrund durchscheinen und es färben.

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

Wenn Sie bereit zum Einfügen von nicht-semantischen Knoten in Ihr Dokument sind, können Sie dies in einem CSS-nur IE-kompatibel Weise tun, indem Sie 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 6

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

Den Code jedes Mal bearbeiten, nur weil sich die Designanforderungen ändern, ist ein Schmerz. Auch wenn Ihr Projekt wächst, wird das Ändern von js-Dateien noch schmerzhafter. Mehr Code, mehr Schmerz.

Versuchen Sie, die Verwendung von hart codierten Stilen zu eliminieren, dies wird Ihnen Zeit sparen, und wenn Sie es schreiben, könnten Sie bitten, die "change-color" Aufgabe für jemand anderen zu tun.

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

Ein weiterer Empfehlungspunkt. Versuchen Sie nicht, fest codierte Knoten zu verbinden, sondern verwenden Sie dazu eine Semantik. Zum Beispiel: "Hinzufügen von Ereignissen zu allen Knoten, die den Inhalt der Klasse haben.

Als sommerliche ich hier den Code setzen, die 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 wie folgt whould sein:

.content { 
    background-color: blue; 
} 

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

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

Answer 7

Dieses könnte sein, ein bisschen komisch, weil Ich bin wirklich kein ernsthafter Programmierer und ich entdecke Dinge in der Programmierung, wie Penicillin erfunden wurde - reiner Zufall. So, wie man ein Element bei mouseover ändert? Verwenden Sie das Attribut :hover genau wie mit a Elementen.

Beispiel:

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

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

Fröhliche Programmierung!

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 Funktion auf JavaScript verwenden, und nennen es

Onclick

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

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