window.onload를 사용하는 방법-JS 튜토리얼-php.cn

window.onload를 사용하는 방법

一个新手

풀어 주다： 2017-10-11 09:11:02

원래의

3151명이 탐색했습니다.

사례를 중심으로 window.onload 사용법을 알아보겠습니다.

Case 1

<!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>

로그인 후 복사

이 경우 window.onload에 js를 넣으면 에러가 발생합니다.
window.onload를 사용하는 방법
분석: onload에 배치된 js는 함수를 실행하기 전에 html이 로드될 때까지 기다립니다. 그러나 html을 로드할 때 그 안에 onclick="btn('box1')"가 있고 해당 함수를 찾을 수 없습니다. 이때 로드됨). 이 함수를 호출하려면 로드되어야 합니다.

사례 2

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!