【JS】点一下显示div，再点又隐藏。

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>圆内摆线模拟</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        border:0px solid red;
        width:1200px;height:600px;
     }

     </style>
    </head>

     <body>
        <div id="testDiv" style="display:none;">
            丞相祠堂何处寻，锦官城外柏森森。
            映阶碧草自春色，隔叶黄鹂空好音。
            三顾频烦天下计，两朝开济老臣心。
            出师未捷身先死，长使英雄泪满襟。
        </div>
        <button onclick="hideOrShow('testDiv')">Click</button>
     </body>
</html>
<script type="text/javascript">
<!--
//-------------------------------
// 如显就隐，如隐就显
//-------------------------------
function hideOrShow(id){
    var node=document.getElementById(id);

    if(node.style.display=="block"){
        node.style.display="none";
    }else{
        node.style.display="block";
    }
}
//-->
</script>

以上粗体部分为核心代码。

END

posted @ 2022-01-20 18:57  不朽的飞翔  阅读(364)  评论(0)  编辑  收藏  举报