电竞比分网-中国电竞赛事及体育赛事平台

分享

P03 顯示隱藏

 悅光陰 2021-10-25

使用if條件判斷,來實現(xiàn)div標(biāo)簽的顯示和隱藏效果的切換。

代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    #div1{
        width: 100px;
        height: 200px;
        background: green;
    }
</style>
<script>
    
    function showhide(){
        var oDiv = document.getElementById('div1');

        if(oDiv.style.display == 'none'){
            oDiv.style.display = 'block';
        }else{
            oDiv.style.display = 'none';
        }
    }
</script>
</head>
<body>
    <input type="button" value="顯示隱藏" onclick="showhide()">
    <div id="div1" style="display: none;"></div>
</body>
</html>

注意:

  1. 在位display屬性賦值的時候,它的值是字符串格式的。不能省略單引號(或者雙引號)。
  2. 標(biāo)簽有個屬性是style,而display是style屬性的屬性。應(yīng)該說style是一個屬性的集合。
  3. 在<style></style>標(biāo)簽中,div標(biāo)簽的dispaly可以直接寫。

在函數(shù)中,要想修改標(biāo)簽的屬性的值,首先還是要先獲取這個標(biāo)簽。

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多