window.onload的使用方法-js教程-PHP中文网

根据案例来了解一下window.onload的使用

案例一

案例二

首页

web前端

js教程

window.onload的使用方法

一个新手

Oct 11, 2017 am 09:11 AM

使用方法

根据案例来了解一下window.onload的使用

案例一

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{                
            width: 100px;                
            height: 100px;                
            background: red;                
            margin-left: 50px;                
            margin-top: 30px;                
            display: none;            
            }
        </style>
        <script type="text/javascript">//          
        window.onload=function(){//              
        function btn(obj){//                  
        var box=document.getElementById(obj);//                  
        box.style.display="block";//              
        }//          
        }
                function btn(obj){
                    var box=document.getElementById(obj);
                    box.style.display="block";
                }        </script>
    </head>
    <body>
        <button onclick="btn(&#39;box1&#39;)" >显示第一个盒子</button>
        <button onclick="btn(&#39;box2&#39;)">显示第二个盒子</button>
        <button onclick="btn(&#39;box3&#39;)" >显示第三个盒子</button>
        <button onclick="btn(&#39;box4&#39;)">显示第四个盒子</button>
        <p id="box1">1</p>
        <p id="box2">2</p>
        <p id="box3">3</p>
        <p id="box4">4</p>
    </body></html>

登录后复制

这种情况下，如果把js放在window.onload里面会报错。
这里写图片描述
解析：放在onload中的js会等html加载完再执行函数，但是在加载html的时候，里面有onclick="btn('box1')"，会找不到这个函数（由于这个时候函数还没有加载）。要调用这个函数，就要让它加载完毕。

案例二

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>111</title> <style> * {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#box {
    width: 360px;
    padding-top: 360px;
    background:url(image/01big.jpg) no-repeat center top;
    margin: 100px auto;
    border: 1px solid blueviolet;
    overflow: hidden;
}
ul {
    border-top: 1px solid blueviolet;
}
li {
    float: left;
}
</style> <script> window.onload=function() {
    var box =document.getElementById("box");
    function fun(id,bg) {
    var ID =document.getElementById(id);
    ID.onmouseover=function() {
    box.style.backgroundImage=bg;
}
} fun("id1","url(image/01big.jpg)");
    fun("id2","url(image/02big.jpg)");
    fun("id3","url(image/03big.jpg)");
    fun("id4","url(image/04big.jpg)");
    fun("id5","url(image/05big.jpg)");
}
<script>
        window.onload=function(){
            var box =document.getElementById("box");            function fun(id,bg){
                var ID =document.getElementById(id);
                ID.onmouseover=function(){
                    box.style.backgroundImage=bg;
                }
            }
            fun("id1","url(image/01big.jpg)");
            fun("id2","url(image/02big.jpg)");
            fun("id3","url(image/03big.jpg)");
            fun("id4","url(image/04big.jpg)");
            fun("id5","url(image/05big.jpg)");
        }    </script></head><body>
    <p id="box">
        <ul>
            <li id="id1"><img src="image/01.jpg" alt=""/></li>
            <li id="id2"><img src="image/02.jpg" alt=""/></li>
            <li id="id3"><img src="image/03.jpg" alt=""/></li>
            <li id="id4"><img src="image/04.jpg" alt=""/></li>
            <li id="id5"><img src="image/05.jpg" alt=""/></li>
        </ul>
    </p></body></html>

登录后复制

以上是window.onload的使用方法的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7564

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

DirectX修复工具怎么用？DirectX修复工具详细使用方法 Mar 15, 2024 am 08:31 AM

　　DirectX修复工具是专业的系统工具，主要功能是检测当前系统的DirectX状态，如果发现异常就可以直接修复。可能还有很多用户不清楚DirectX修复工具怎么用吧，下面就来看看详细教程。　　1、使用修复工具软件进行修复检测。　　2、如果修复完成后提示C++组件存在异常的问题，请点击取消按钮，然后点击工具菜单栏。　　3、点击选项按钮，选择扩展，点击开始扩展按钮。　　4、扩展完成后再重新进行检测修复即可。　　5、如果修复工具操作完成后仍未解决问题，可以尝试卸载重新安装报错的程序。

HTTP 525状态码介绍：探究其定义和应用 Feb 18, 2024 pm 10:12 PM

HTTP525状态码简介：了解其定义和使用方法HTTP（HypertextTransferProtocol）525状态码是指服务器在SSL握手过程中发生错误，导致无法建立安全连接。在传输层安全性（TLS）握手期间发生错误时，服务器将返回此状态码。该状态码属于服务器错误类别，通常表示服务器配置或设置问题。当客户端尝试通过HTTPS连接到服务器时，服务器无

百度网盘怎么用-百度网盘的使用方法 Mar 04, 2024 pm 09:28 PM

有很多朋友还不知道百度网盘怎么用，所以下面小编就讲解了百度网盘的使用方法，有需要的小伙伴赶紧来看一下吧，相信对大家一定会有所帮助哦。第一步：安装好百度网盘后直接登录(如图所示);第二步：然后可根据页面提示选择“我的分享”和“传输列表”(如图所示);第三步：在“好友分享”里可以把图片和文件直接分享给好友(如图所示);第四步：接着选择“分享”后可勾选电脑文件或者网盘文件(如图所示);第五步：然后就可以寻找好友(如图所示);第六步：还可以在“功能宝箱”中寻找自己需要的功能(如图所示)。上面就是小编为大

快速学会复制和粘贴操作 Feb 18, 2024 pm 03:25 PM

复制粘贴快捷键使用方法复制粘贴是我们在日常使用电脑时经常会遇到的操作。为了提高工作效率，熟练掌握复制粘贴快捷键是非常重要的。本文将介绍一些常用的复制粘贴快捷键使用方法，帮助读者更加方便地进行复制粘贴操作。复制快捷键：Ctrl+CCtrl+C是复制的快捷键，通过按住Ctrl键然后再按C键，即可将选中的文字、文件、图片等内容复制到剪贴板。要使用该快捷键，

如何正确使用win10命令提示符进行自动修复操作 Dec 30, 2023 pm 03:17 PM

电脑随着使用的时间越长越容易出现故障，这个时候就需要小伙伴去用自己的方法修复，那么怎么做比较简便呢？今天就给大家带来用命令提示符修复的教程。win10自动修复命令提示符怎么用：1、按下“Win+R”输入cmd打开“命令提示符”2、输入chkdsk查看修复命令3、如果需要查看其它地方也可以添加别的分区比如“d”4、输入执行命令chkdskd:/F即可5、如果在修改过程中被占用，可输入Y继续

KMS激活工具是什么？KMS激活工具怎么用？KMS激活工具使用方法？ Mar 18, 2024 am 11:07 AM

KMS激活工具是一种用于激活微软Windows和Office产品的软件工具。KMS是KeyManagementService的缩写，即密钥管理服务。KMS激活工具通过模拟KMS服务器的功能，使得计算机可以连接到这个虚拟的KMS服务器，从而实现对Windows和Office产品的激活。KMS激活工具体积小巧，功能强大，可以一键永久激活，无需联网状态就可以激活任何版本的window系统和任何版本的Office软件，是目前最成功的且经常更新的Windows激活工具，今天小编就给大家介绍一下kms激活工

potplayer怎么用-potplayer的使用方法 Mar 04, 2024 pm 06:10 PM

potplayer是一款非常强大的媒体播放器，但不少伙伴还不知道potplayer怎么用，今天小编就来详细介绍一下potplayer的使用方法，希望能帮助大家。1、PotPlayer快捷键PotPlayer播放器默认常用快捷键如下：(1)播放/暂停：空格(2)音量：鼠标滚轮，上下方向键(3)前进/后退：左右方向键(4)书签：P-添加书签，H-查看书签(5)全屏/还原：Enter(6)倍速：C-加速，X-减速，Z-复位(按一次调整0.1倍速度，可以在0.2到12倍速之间调节)(7)上/下一帧：D/

如何使用快捷键合并单元格 Feb 26, 2024 am 10:27 AM

合并单元格的快捷键怎么用在日常工作中，我们经常需要对表格进行编辑和排版。而合并单元格是一种常见的操作，可以将相邻的多个单元格合并为一个单元格，以提高表格的美观程度和信息展示效果。在MicrosoftExcel和GoogleSheets等主流的电子表格软件中，合并单元格的操作非常简便，可以通过快捷键来实现。下面将介绍在这两个软件中合并单元格的快捷键用法。在

See all articles

window.onload的使用方法

根据案例来了解一下window.onload的使用

案例一

案例二

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题