Jak używać JavaScript zmienić div backgroundColor

Question

Poniższa HTML:

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

Kiedy mouseover zawartości div potem to backgroundColor i H2 (wewnątrz tego div) zmiana backgroundColor (podobnie jak CSS: hover)

Wiem, że można użyć CSS (: hover), aby zrobić to w nowoczesnej przeglądarce, ale IE6 nie działa.

Jak korzystać z JavaScript (nie jQuery lub innej architektury JS), aby to zrobić?

Edycja: jak zmienić backgroundColor h2 zbyt

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

uzyskać dostęp do elementu, który chcesz zmienić poprzez DOM, na przykład z document.getElementById() lub poprzez this w Twoim obsługi zdarzeń, a także zmienić styl ten element:

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

EDIT

Można użyć getElementsByTagName też (niesprawdzone) 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'); } 
    } 
} 

Answer 3

Aby to zrobić bez jQuery lub innej biblioteki, trzeba dołączyć onmouseover i onmouseout zdarzenia do każdego div i zmienić styl w przypadku obsługi.

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 h2 nie ustawił swoje własne tło, tło div będą widoczne i kolor też.

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

Jeśli są chętni, aby wstawić non-semantyczne węzłów w dokumencie, można to zrobić w sposób zgodny CSS IE-tylko owijając swoje div w fałszywych znaczników 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> 

Answer 6

Dodawanie/zmiana stylu elementów w kodzie jest złą praktyką. Dziś chcesz zmienić kolor tła, a jutro chcesz zmienić tło, a jutro zdecydowałeś, że fajnie byłoby zmienić granicę.

Edycja kodu za każdym razem tylko dlatego, że zmieniają się wymagania projektowe to ból. Ponadto, jeśli Twój projekt będzie rósł, zmiany plików js będą jeszcze bardziej bolesne. Więcej kodu, więcej bólu.

Postaraj się wyeliminować użycie zakodowanych stylów, dzięki czemu zaoszczędzisz czas, a jeśli to zrobisz, możesz poprosić kogoś o wykonanie zadania "zmień kolor".

Zamiast więc zmieniać bezpośrednie właściwości stylu, można dodawać/usuwać klasy CSS na węzłach. W twoim konkretnym przypadku wystarczy zrobić to dla węzła nadrzędnego - "div", a następnie nadać podwęzłom styl przez CSS. Nie ma więc potrzeby stosowania określonej właściwości stylu do DIV i H2.

Jeszcze jeden punkt rekomendacji. Staraj się nie łączyć z węzłami na stałe, ale użyj do tego semantycznego. Na przykład: "Aby dodać zdarzenia do wszystkich węzłów, które mają" zawartość "klasy.

Jako Summery kładę tutaj kod, który będzie używać 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); 
    } 
} 

I CSS whould być tak:

.content { 
    background-color: blue; 
} 

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

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

Answer 7

Ten może być nieco dziwne, ponieważ Naprawdę nie jestem poważnym programistą i odkrywam rzeczy w programowaniu, jak wynaleziono penicylinę - zwykły wypadek. Jak zmienić element po najechaniu kursorem myszy? Użyj atrybutu :hover, podobnie jak w przypadku elementów a.

Przykład:

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

To zmienia żadnych div z klasą classname mieć czarne tło na mousover. Zasadniczo możesz zmienić dowolny atrybut. Testowane w IE i Firefox

Happy programowanie!

Answer 8

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> 

Answer 9

To bardzo proste, wystarczy użyć funkcji na JavaScript i nazywają to onclick

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

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