JavaScript - 元素的显示和隐藏

浏览数：17 / 时间：2015年06月08日

元素的显示和隐藏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>元素的显示和隐藏</title>
    <style type="text/css">
        img{
            display:block;
        }
    </style>
    <script type="text/javascript">
        function change(){
            var lu=document.getElementById("lu"); //DOM对象
            lu.style.color="red";
            lu.style.fontSize="25px";
            lu.style.fontWeight="bold";
            lu.style.borderLeftSize="2px";
            lu.style.borderLeftColor="blue";
            lu.style.borderLeftStyle="solid";

        }

        //通过display显示和隐藏元素
        function hide1(){
            if($("img2").style.display=="block"){
                $("img2").style.display="none";
            }else{
                $("img2").style.display="block";
            }
        }

        //通过visibility显示和隐藏元素
        function hide2(){
            $("img2").style.visibility="hidden";
        }

        //简化通过id获取元素
        function $(id){
            return document.getElementById(id);
        }
    </script>
  </head>

  <body>
    <span id="lu">陆永洋</span>
    <input type="button" value="变" onclick="change();" />
    <hr/>

    <input type="button" value="通过display显示和隐藏元素" onclick="hide1();" />
    <input type="button" value="通过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>