點擊按鈕，執行一個函數，該函數控制div的顯示與隱藏

本文轉載自查看原文 2017-03-02 14:29 1400

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #oDiv{
            width:100px;
            height:300px;
            background: #ccc;
            display: none;
        }
    </style>
</head>
<body>
        <!-- 點擊按鈕，執行一個函數，該函數控制div的顯示與隱藏，不用去獲取按鈕的id(getElementById) -->
    <input type="button" id = "btn"
    value = "點擊" onclick = "showHide()">
    <div id = "oDiv"></div>
</body>
<script type="text/javascript">
    function showHide(){
        var oBtn = document.getElementById("btn");
        var oDiv = document.getElementById("oDiv");
        if(oDiv.style.display == "block"){
            oDiv.style.display = "none";
        //為什么這里的block要加引號，可以參考該處css中的display中的設置  css中display是key,value是block或者none，value是個字符串 那么肯定要加引號了。
        }else{
            oDiv.style.display = 'block';
        }
    }
</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js封裝函數控制div的顯示與隱藏 jquery怎么實現點擊一個按鈕控制一個div的顯示和隱藏【jquery】jquery怎么實現點擊一個按鈕控制一個div的顯示和隱藏點擊按鈕隱藏和顯示div JS控制DIV顯示或隱藏函數 React 點擊按鈕顯示div與隱藏div 原生JS實現點擊一個按鈕顯示一個div，再點擊按鈕div隱藏，或點擊除div外其它空白處div隱藏 jquery點擊按鈕顯示和隱藏DIv React 點擊按鈕顯示div與隱藏div，並給div傳children 按鈕控制div顯示和隱藏（動畫）