Jak używać JavaScript do zmiany tła div

Dodawanie / zmiana stylu elementów w kodzie jest złą praktyką. Dzisiaj chcesz zmienić kolor tła , a jutro chcesz zmienić tło obraz i pojutrze zdecydowałeś, że dobrze będzie również zmienić obramowanie.

Edycja kodu za każdym razem tylko dlatego, że zmiany wymagań projektowych są uciążliwe. Ponadto, jeśli twój projekt będzie się rozwijał, zmiana plików js będzie jeszcze bardziej bolesna. Więcej kodu, więcej bólu.

Spróbuj Wyeliminuj użycie mocno zakodowanych stylów, zaoszczędzisz czas, a jeśli zrobisz to dobrze, możesz poprosić o wykonanie zadania "Zmień kolor" komuś innemu.

Więc zamiast zmieniać bezpośrednie właściwości stylu, możesz dodawać / usuwać klasy CSS na węzłach. W twoim konkretnym przypadku wystarczy zrobić to tylko dla węzła nadrzędnego - "div", a następnie stylizować podnody za pomocą CSS. Nie ma więc potrzeby stosowania specyficznych właściwości stylu do DIV I do H2.

Jeszcze jeden punkt rekomendacyjny. Staraj się nie łączyć węzłów zakodowane na twardo, ale użyj do tego semantyki. Na przykład: "aby dodać zdarzenia do wszystkich węzłów, które mają klasę 'content'.

Podsumowując, oto kod, który użyłbym do takich zadań:

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

A Ty CSS, który byłby taki:

.content {
    background-color: blue;
}

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

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

Uzyskaj dostęp do elementu, który chcesz zmienić za pomocą DOM, na przykład za pomocą document.getElementById() lub za pomocą this w programie obsługi zdarzeń i zmień styl w tym elemencie:

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

EDIT

Możesz również użyć getElementsByTagName , (untested) przykład:

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

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

Ten może być trochę dziwny, ponieważ naprawdę nie jestem poważnym programistą i odkrywam rzeczy w programowaniu, w jaki sposób wynaleziono penicylinę - zwykły wypadek. Jak zmienić element na mouseover? Użyj atrybutu :hover tak jak w przypadku elementów a.

Przykład:

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

To zmienia dowolne div z klasą classname na czarne tło na mousover. Możesz w zasadzie zmienić dowolny atrybut. Testowane w IE i Firefoksie

To bardzo proste, wystarczy użyć funkcji w javaScript i nazwać ją onclick

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

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

Jeśli chcesz wstawić węzły nie semantyczne do dokumentu, możesz to zrobić w sposób zgodny tylko z CSS, zawijając swoje div w fałszywe znaczniki A.

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

Aby to zrobić bez jQuery lub innej biblioteki, musisz dołączyć zdarzenia onMouseOver i onMouseOut do każdego div I zmienić styl w procedurach obsługi zdarzeń.

Na przykład:

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

Jeśli twój h2 nie ustawił własnego tła, tło div zostanie wyświetlone i pokolorowane.

Możesz wypróbować ten skrypt. :)

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