JavaScript - 元素的显示和隐藏

最新推荐文章于 2023-05-05 11:02:24 发布

陆讯

最新推荐文章于 2023-05-05 11:02:24 发布

阅读量2k

点赞数

分类专栏： JavaScript实例库文章标签： javascript 元素显示隐藏

本文链接：https://blog.csdn.net/wangzi11322/article/details/45285613

版权

JavaScript实例库专栏收录该内容

22 篇文章 9 订阅

订阅专栏

元素的显示和隐藏

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