Làm thế nào để sử dụng JavaScript để thay đổi div backgroundColor

Question

HTML dưới đây:

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

Khi di chuột lên nội dung của div sau đó nó backgroundColor và h2 (bên trong div này) backgroundColor thay đổi (giống như CSS: hover)

Tôi biết điều này có thể sử dụng CSS (: hover) để thực hiện việc này trong trình duyệt hiện đại nhưng IE6 không hoạt động.

Làm thế nào để sử dụng JavaScript (không phải jQuery hoặc khung công tác JS khác) để thực hiện việc này?

Edit: làm thế nào để thay đổi backgroundColor h2 quá

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

Tiếp cận các yếu tố bạn muốn thay đổi thông qua DOM, ví dụ với document.getElementById() hoặc qua this trong xử lý sự kiện của bạn, và thay đổi phong cách trong rằng yếu tố:

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

EDIT

Bạn có thể sử dụng getElementsByTagName quá, (chưa được kiểm tra) ví dụ:

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

Để thực hiện điều này mà không cần jQuery hoặc bất kỳ thư viện khác, bạn sẽ cần phải đính kèm onMouseOver và onmouseout sự kiện để mỗi div và thay đổi phong cách trong sự kiện này xử lý.

Ví dụ:

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

Nếu h2 của bạn đã không được thiết lập nền của riêng của nó, là nền div sẽ hiển thị thông qua và tô màu nó quá.

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

Nếu bạn sẵn sàng chèn các nút không phải ngữ nghĩa vào tài liệu của mình, bạn có thể thực hiện điều này theo cách tương thích với CSS bằng cách gói các div trong thẻ giả mạo.

<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

Thêm/thay đổi kiểu phần tử trong mã là hành vi không tốt. Hôm nay bạn muốn thay đổi màu nền và ngày mai bạn muốn thay đổi hình nền và sau ngày mai bạn quyết định rằng nó cũng sẽ tốt đẹp để thay đổi biên giới.

Chỉ chỉnh sửa mã mỗi lần vì yêu cầu thiết kế thay đổi là một cơn đau. Ngoài ra, nếu dự án của bạn sẽ phát triển, việc thay đổi các tệp js sẽ càng đau đớn hơn. Nhiều mã hơn, đau hơn.

Cố gắng loại bỏ việc sử dụng kiểu mã hoá cứng, điều này sẽ giúp bạn tiết kiệm thời gian và nếu bạn viết, bạn có thể yêu cầu thực hiện tác vụ "thay đổi màu" cho người khác.

Vì vậy, thay vì thay đổi thuộc tính trực tiếp của kiểu, bạn có thể thêm/xóa lớp CSS trên các nút. Trong trường hợp cụ thể của bạn, bạn chỉ cần làm điều này cho nút cha - "div" và sau đó, tạo kiểu cho các subnodes thông qua CSS. Vì vậy, không cần phải áp dụng đặc tính phong cách cụ thể cho DIV và H2.

Một điểm đề xuất khác. Cố gắng không kết nối các nút được mã hóa cứng, nhưng hãy sử dụng một số ngữ nghĩa để thực hiện điều đó. Ví dụ: "Để thêm sự kiện vào tất cả các nút có nội dung của lớp".

Là một mùa hè tôi đặt ở đây mã mà tôi sẽ sử dụng cho các nhiệm vụ như:

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

Và bạn CSS whould được như thế này:

.content { 
    background-color: blue; 
} 

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

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

Answer 7

Cái này có thể là một chút lạ vì Tôi thực sự không phải là một lập trình viên nghiêm túc và tôi đang khám phá ra những thứ trong lập trình cách penicillin được phát minh - tai nạn tuyệt đối. Vậy làm thế nào để thay đổi một yếu tố khi di chuột qua? Sử dụng thuộc tính :hover giống như với các yếu tố a.

Ví dụ:

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

này thay đổi bất kỳ div với lớp classname để có một nền đen trên mousover. Về cơ bản bạn có thể thay đổi bất kỳ thuộc tính nào. Thử nghiệm trong IE và Firefox

Lập trình vui vẻ!

Answer 8

Bạn có thể dùng thử tập lệnh này. :)

<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

Nó rất đơn giản chỉ cần sử dụng một hàm JavaScript và gọi nó là onclick

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

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