hide div with javascript

Question

为什么这不起作用。我应该如何处理JS将我隐藏S_Login Div？请帮助

<?php
define("INSTALLING", true);
$hide = true;
if(INSTALLING == true): ?>
    <script type="text/JavaScript">
    <?php if (isset($hide)){if($hide == true){echo "
    document.getElementById('s_login').style.visibility = 'hidden';
    ";}} ?>
    </script>
    <div id="s_login">
        <form action="index.php" method="GET">
            <input type="text" name="s_host" placeholder="MySQL Host" />
            <input type="text" name="s_user" placeholder="MySQL Username"  />
            <input type="password" name="s_password" placeholder="MySQL Password" />
            <input type="submit" name="submit" value="Log In" />
        </form>
    </div>
<?php else: ?>
<?php endif; ?>

Answer 1

最好的方法是将功能包装在

中

 $(document).ready(function() {
     // script here
 }

使用jQuery或

document.addEventListener("DOMContentLoaded", function(event) { 
     // script here
});

没有jQuery。

这可以确保在触发脚本之前加载DOM。

Answer 2

将隐藏元素脚本代码放入DOM Ready或Window Onload方法中。您的脚本首先执行，当时dom即您 s_login element在DOM中都不可用。

使用当前代码检查此信息，您将获得无效。即，您没有隐藏的元素。

var element = document.getElementById('s_login');
console.log(element);

如果您正在使用jQuery，则可以这样做：

$(document).on("ready",function(){
   document.getElementById('s_login').visibility = "hidden"
});

其他本性

window.onload = function(){
   document.getElementById('s_login').visibility = "hidden"
}

没有使用domcontentload的侦听器，因为可能会有一些交叉浏览器问题。