时间戳

首页 > 解决方案 > document.getElementById 不工作取决于我何时放置我正在访问的 div

html - document.getElementById 不工作取决于我何时放置我正在访问的 div

问题描述

我试图在按钮单击时隐藏 div 元素。我有以下 HTML 代码（可能我报告了太多代码，我不确定这是否有帮助，请考虑我添加到代码中的三个注释）。

<!-- HOME DIV -->
<div class="home" style="height: 100vh;">
<div class="home_slider_container" style="height: 100vh">
    <div class="owl-carousel owl-theme home_slider">
        <div class="owl-item home_slider_item">
            <div class="home_slider_background" style="background-image:url( {% static 'images/home_slider_1.jpg' %})"></div>
            <div class="home_slider_content_container">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div style="text-align: center; bottom: 60px;">
                                <div class="home_slider_title">CASTELLO</div>
                                <div class="home_slider_subtitle">Acquista nella tua città.</div>
                                <div class="newsletter_form_container" style="margin-top: 130px;">
                                    <form action="#" id="newsletter_form" class="newsletter_form">
<!-- BELOW IS THE DIV TO BE HIDDEN -->  
                                        <div id="myDIV" style="display: block;">CIAO</div>

<!-- BELOW IS THE BUTTON TO HIDE THE DIV -->
                                        <div class="button button_light home_button" style="display: inline-block;" onclick="show()"><a>Trova</a></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我有以下javascript函数：

function show() {
var x = document.getElementById("myDIV");
console.log(x.style.display)
x.style.display = "none";
console.log(x.style.display)

}

当我按下按钮时，我可以在控制台上看到显示属性从“块”变为“无”，这是应该的，但网页上没有任何反应，“myDiv”div 不会消失。只有当我将“myDiv”div 放在“home”div 之外时，它才能正常工作！为什么只有当我将“myDiv”div 放置在页面中的某个位置时，DOM 才会更新为正确的“display”属性？

非常感谢。

标签： htmlbuttonclickhidegetelementbyid

解决方案

我尝试了您的代码，当我将 JavaScript 部分放在正文结束标记 () 下方时，它工作正常。我按下 Trova，myDiv 就如预期般消失了。 

function show() {
var x = document.getElementById("myDIV");
console.log(x.style.display)
x.style.display = "none";
console.log(x.style.display)}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  background-color: black;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<div class="home" style="height: 100vh;">
<div class="home_slider_container" style="height: 100vh">
    <div class="owl-carousel owl-theme home_slider">
        <div class="owl-item home_slider_item">
            <div class="home_slider_background"></div>
            <div class="home_slider_content_container">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div style="text-align: center; bottom: 60px;">
                                <div class="home_slider_title">CASTELLO</div>
                                <div class="home_slider_subtitle">Acquista nella tua città.</div>
                                <div class="newsletter_form_container" style="margin-top: 130px;">
                                    <form action="#" id="newsletter_form" class="newsletter_form">
<!-- BELOW IS THE DIV TO BE HIDDEN -->  
                                        <div id="myDIV" style="display: block;">CIAO</div>

<!-- BELOW IS THE BUTTON TO HIDE THE DIV -->
                                        <div class="button button_light home_button" style="display: inline-block;" onclick="show()"><a>Trova</a></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

推荐阅读