更改样式的加载功能不起作用

Question

好吧，我希望当 body 完全加载后调用一个函数来显示隐藏图像。我尝试了很多东西并进行了很多搜索，但没有任何效果。我认为这非常简单易行，但我不知道为什么不起作用...我希望任何人都能帮助我。

<body onload="start()">
<div id="bg" style="display:none"></div>
</body>

function start() {
document.getElementById("bg").style.display = 'block';
}

Here Jsfiddle link

Answer 1

只需从您的主体中删除 onload="start()" 并替换您的函数 start for

<script>
    window.onload=function() {
        document.getElementById("bg").style.display = 'block';
    };
</script>

如果你想使用jquery，那么

<script>
    $(document).ready(function (){
        $("#bg").css("display", "block");
    });
</script>

Answer 2

那是因为您需要在 body 标签内运行您的 Javascript。其实在最后。相反，start 函数将是未定义的，什么也不会发生：

<body onload="start()">
    <div id="bg" style="display:none"></div>
    <script>
        function start() {
            document.getElementById("bg").style.display = 'block';
        }
    </script>
</body>

Answer 3

你必须选择：

1- 在开始前添加脚本

<script type="text/javascript">
    $(document).ready(function () {
        //Add your code here to run after fully page load
        document.getElementById("bg").style.display = 'block';
    });
</script>

2- 或在结束 </body> 标签之前在 <body> 末尾添加您的脚本：

<script type="text/javascript">
     //Add your code here to run after fully page load
     document.getElementById("bg").style.display = 'block';
</script>

更改样式的加载功能不起作用

Onload function for change style doesn't work

javascript

styles

function

onload

getelementbyid