Display and hide of elements
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" ><html> <head> <title>Display and hide of elements</title> <style type="Text/css"> img{ display:block; } </style> <script type="Text/javascript"> function change(){ varLu=document.getelementbyid ("Lu");//dom ObjectLu.style.color="Red"; Lu.style.fontsize="25px"; lu.style.fontweight="Bold"; Lu.style.borderleftsize="2px"; Lu.style.borderleftcolor="Blue"; lu.style.borderleftstyle="SOLID"; }//Show and hide elements through display function hide1(){ if($("Img2"). style.display=="Block"){ $("Img2"). style.display="None"; }Else{ $("Img2"). style.display="Block"; } }//Show and hide elements through visibility function hide2(){$("Img2"). style.visibility="Hidden"; }//simplifies getting elements by ID function $(ID){ returndocument.getElementById (ID); }</script> </head> <body> <span id="Lu">Lu Yongyang</span> <input type="button" value="variable" onclick="Change () ;" /> <hr/> <input type="button" value="Show and hide elements through display" onclick="Hide1 ();" /> <input type="button" value="Show and hide elements through visibility" onclick ="Hide2 ();" /> <img src="Images/class1-1.jpg" id="Img1" /> <img src="Images/class1-2.jpg" id="Img2" /> <img src="Images/class1-3.jpg" id="Img3" /> </body></html>
JavaScript-the display and hiding of elements