Frage Wie man JavaScript benutzt, um div backgroundColor 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 mouseover der Inhalt von div dann ist es backgroundColor und der h2 (innerhalb dieses div) backgroundColor ändern (genau wie das CSS: Hover)

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

Wie kann JavaScript (nicht jQuery oder ein anderes JS-Framework) dazu verwendet werden?

Edit: wie man die h2 backgroundColor auch ändert


26
2017-12-09 15:16


Ursprung


Antworten:


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

58
2017-12-09 15:20



Das Hinzufügen / Ändern des Stils der Elemente im Code ist eine schlechte Übung. 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.

Das Bearbeiten des Codes jedes Mal 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 hart codierter Stile zu eliminieren, dies spart Ihnen Zeit und wenn Sie es schreiben, könnten Sie die Aufgabe "Farbe ändern" an jemand anderen senden.

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 Zusammenfassung habe ich hier den Code angegeben, 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 du CSS könnte so sein:

.content {
    background-color: blue;
}

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

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

9
2017-12-09 16:20



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

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

BEARBEITEN

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

5
2017-12-09 15:21



<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
2017-12-09 15:21



Dieser könnte ein bisschen komisch sein, weil ich wirklich kein ernsthafter Programmierer bin und ich Dinge in der Programmierung entdecke, wie Penicillin erfunden wurde - reiner Zufall. So, wie man ein Element bei mouseover ändert? Benutze die :hover Attribut wie mit a Elemente.

Beispiel:

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

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

Fröhliche Programmierung!


1
2017-10-14 23:16



Wenn Sie nicht-semantische Knoten in Ihr Dokument einfügen möchten, können Sie dies nur auf IE-kompatible Weise tun, indem Sie Ihre 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
2017-12-09 15:32



Um dies ohne jQuery oder eine andere Bibliothek zu tun, müssen Sie onMouseOver- und onMouseOut-Ereignisse an jedes div anhängen und den Stil in den Ereignisprozeduren ändern.

Beispielsweise:

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 div-Hintergrund angezeigt und auch eingefärbt.


0
2017-12-09 15:21



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
2018-02-13 15:25