Question

我编写了一个JS函数来隐藏HTML中的一些元素，并使用window.onload()来调用这个函数。但是在HTML加载完成后，window.onload()调用函数存在一个问题，这使得这些元素首先显示在网页中并等待几秒钟后消失。那么我是否有一些方法可以在加载此网页的过程中隐藏它？

这是我的JS代码：

function toggle_visibility(id) {
    var e = document.getElementById(id);
    e.style.display = 'none';
}

window.onload = function () {
    toggle_visibility("excelDataTable_epgd");
    toggle_visibility("EPGD_SIZE");
}

Answer 1

如何首先使默认可见性为none，然后在页面加载后启用要显示的那些？

Answer 2

我建议如果你想在页面加载时首先隐藏元素，你可以直接（通过外部或动态）。

<强> E.g。

function toggle_visibility(id) {
    var e = document.getElementById(id);
    var display = e.style.display;
    if (display == 'none') {
       e.style.display = 'block';
    }
    else {
       e.style.display = 'none';
    }
}

window.onload = function () {
    toggle_visibility("excelDataTable_epgd");
    toggle_visibility("EPGD_SIZE");
}

然后，在页面完成加载后，您可以运行JS函数使它们可见。

{{1}}

Answer 3

如前所述，最好的办法是最初通过CSS隐藏元素，因为这不会导致浏览器重绘。

但更一般地说，通过JS操作DOM元素的最快方法是将代码直接放在元素之后。

E.g。

<div id="foo">...</div>
<script>toggle_visibility('foo')</script>

Answer 4

在HTML加载完成之前，HTML元素尚未加入DOM树，调用JS函数无法操作DOM元素，因此需要使用CSS来隐藏元素，然后调用JS函数使元素显示

如何在HTML加载完成之前调用JS函数？

4 个答案: