DOM case study ----------- intermittent color change and mouse movement color change

Source: Internet
Author: User
& Lt ;! DOCTYPEhtmlPUBLIC & quot;-// W3C // DTDXHTML1.0Transitional // EN & quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns"h


 


Line color change

Script
Function geHang (){
// Obtain all tr
Var trlist = document. getElementsByTagName ("tr ");
 
For (var I = 1; I  
// Judge
If (I % 2 = 0 ){
Trlist [I]. className = "two ";
} Else {
Trlist [I]. className = "one ";
}
 
 
Var oldcolor;
 
// When the mouse moves to the row, the background of the change is deepened.
Trlist [I]. onmouseover = function (){
Oldcolor = this. className;
// Reset the color.
This. className = "over ";
}
 
Trlist [I]. onmouseout = function (){

// When the mouse leaves, the color of the modified line is automatically restored.
This. className = oldcolor;
}
 
}
 
 
}

// When the mouse moves up, the color of the current row is changed.
Var color = "";
Function over (trNode ){
// Save the original color.
Color = trNode. className;
// Set the color of the current row to over
TrNode. className = "over ";
}
// When the mouse moves and leaves, the color of the original line is set back.
Function out (trNode ){
// Restore the previous color
TrNode. className = color;
}
Script

 
 
 
 
 


















































Name Gender Age Nationality Phone number Email
           
           
           
           
           



From the column by Liu haicao
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.