highlight_e.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> highlight_e </title>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
 <style type="text/css">
    .hilite{ color:#ff0000; } 
 </style>
<script type="text/javascript">
function hide(e,reflow){
    if(reflow){
        e.style.display="none";//不再占用页面空间
    }
    else{
        e.style.visibility="hidden";//仍然占用页面空间，页面呈现空白
    }
}

function highlight(e){
    if(!e.className){
        e.className="hilite";
    }
    else{
        e.className += " hilite";
    }
}

</script>


<div id="div1" > QWERT</div>
<div id="div2" > YUIOP</div>
<div id="div3" > ASDFG</div>
<script type="text/javascript">
function hide_div1(){
    var div1=document.getElementById("div1");
    hide(div1,true);
}

function hide_div2(){
    var div2=document.getElementById("div2");
    hide(div2,false);
}

function highlight_div3(){
    var div3=document.getElementById("div3");
    highlight(div3);
}
</script>

<hr>
<input type="button" value="hide div1" onclick="hide_div1()">
<hr>
<input type="button" value="hide div2" onclick="hide_div2()">
<hr>
<input type="button" value="highlight div3" onclick="highlight_div3()">

 </body>
</html>

 

posted @ 2017-12-27 14:04  sky20080101  阅读(46)  评论(0)    收藏  举报