當倒計時結束時，我想讓 h1[1] 和 h1[2] 標題可見并隱藏 h1[0] 隱藏。我在 javasript 代碼段中以下面給出的方式做了，但是 h1[1] 和 h1[2] 不可見。請有人指出我的錯誤以及如何解決它？
爪哇腳本
document.body.querySelector("h1").textContent = "HAPPY NEW YEAR";
document.body.getElementsByTagName("h1")[1].style.display = inline; //Not working
document.body.getElementsByTagName("h1")[2].style.display = inline; //Not working
HTML
<body>
<h1>New Year Countdown</h1>
<h1 style="display:none">HAPPY NEW YEAR</h1>
<br>
<h1 style="display:none">WELCOME 2023!</h1>
<div class=" container" id="countdown">
<div class=" row" id="time">
<div class="col" id="days">
<h2>00</h2>
<h6>DAYS</h6>
</div>
<div class="col" id="hours">
<h2>00</h2>
<h6>HOURS</h6>
</div>
<div class="col" id="minutes">
<h2>00</h2>
<h6>MINUTES</h6>
</div>
<div class="col" id="seconds">
<h2>00</h2>
<h6>SECONDS</h6>
</div>
</div>
</div>
<script src="source.js"></script>
</body>
uj5u.com熱心網友回復：
你可以添加一個ID到你的H1并使用getElementsById('h1-id')
然后更新visibility: hiddencss樣式屬性。
uj5u.com熱心網友回復：
我了解您面臨的問題。首先嘗試洗掉您在 html 檔案中應用的<style></style>內聯 css并將其轉移到<header></header>html 檔案的內部部分，我們這樣做是因為行內 css比您在檔案中注入的其他形式的樣式更重要.
html
<h1 class="headers" id="new_year_cntdwn">New Year Countdown</h1>
<h1 class="headers">HAPPY NEW YEAR</h1>
<br>
<h1 class="headers">WELCOME 2023!</h1>
添加css
.headers{
display: none;
}
#new_year_cntdwn{
display: inline;
}
對于 JavaScript 部分，請在洗掉行內 css 后嘗試使用它
如果您想了解有關querySelectorAll或forEach方法的更多資訊，請在此處遍歷陣列（此處為正在選擇的標頭陣列），請嘗試參考https://developer.mozilla.org/en-US/
document.querySelectorAll(".headers").forEach(header=>header.style.display="block")
document.querySelector("#new_year_cntdwn").style.display="none"
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/403027.html
標籤：
下一篇：反應打字稿滑鼠事件重疊