So verwenden Sie window.onload-js-Tutorial-php.cn

So verwenden Sie window.onload

一个新手

Freigeben： 2017-10-11 09:11:02

Original

3228 Leute haben es durchsucht

Erfahren Sie mehr über die Verwendung von window.onload je nach Fall

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

Nach dem Login kopieren

In diesem Fall, wenn Sie js eingeben Das Fenster In .onload wird ein Fehler gemeldet.
So verwenden Sie window.onload
Analyse: Die in Onload platzierten js warten darauf, dass der HTML-Code geladen wird, bevor die Funktion ausgeführt wird. Beim Laden des HTML-Codes ist jedoch onclick="btn('box1')" darin enthalten, und die Funktion wird nicht ausgeführt gefunden (da die Funktion zu diesem Zeitpunkt noch nicht geladen ist). Um diese Funktion aufzurufen, muss sie geladen werden.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie window.onload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!