使用JavaScript無法顯示「塊」

在頁面加載後，我無法顯示塊「登錄」。我已經嘗試使用visibility或display來使「塊」隱藏或不隱藏。使用JavaScript無法顯示「塊」

而且已經嘗試把腳本部分成不同的地方：

<!DOCTYPE html> 
 
<HTML> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" type="text/css" href="../css/common.css"> 
 
    <style> 
 
    .login { 
 
     display: none; 
 
    } 
 
    </style> 
 

 
    <script> 
 
    function showlogin() { 
 
     document.getElementById("logvid").getElementByClassName("login").style.display = 'block'; 
 
    } 
 
    </script> 
 

 
    <title>City's Video</title> 
 
</head> 
 

 
<body onload="showlogin"> 
 

 
    <div id="logvid"> 
 
    <div class="login"> 
 
     <form method="post" action="home.html"> 
 
     Name: <input type="text" name="name"><br> Password: <input type="password" name="password"><br><br> 
 
     <input type="submit" name="Login" value="Login"> <input type="reset" value="reset"> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</HTML>

來源

2017-04-02 summer hkg

getElementByClassName返回具有所有給定的類名的所有元素的數組狀物體。所以你要選擇這樣的DIV：

document.getElementsByClassName("login")[0].style.display ='block';

https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

，你需要調用函數用括號： <body onload="showlogin()">

來源

2017-04-02 11:58:37

getElementsByClassName將返回HTML elements的集合。因此，我們需要遍歷集合或更具體地瞭解哪些元素是需要的。

另一種方法是使用document.querySelectorAll或document.querySelector。

樣品下面的代碼片段：

window.onload = function() { 
 

 
    document.querySelectorAll("#logvid > .login").forEach(function(element, index, array) { 
 
    element.style.display = 'block'; 
 
    element.style.border = "1px solid green"; 
 
    }); 
 
}

.login { 
 
    display: none; 
 
}

<div id="logvid"> 
 
    <div class="login"> 
 
    <form method="post" action="home.html"> 
 
     Name: <input type="text" name="name"><br> Password: <input type="password" name="password"><br><br> 
 
     <input type="submit" name="Login" value="Login"> <input type="reset" value="reset"> 
 
    </form> 
 
    </div> 
 
</div>

來源

2017-04-02 12:14:47

使用JavaScript無法顯示「塊」

回答

相關問題