zoukankan      html  css  js  c++  java
  • window.onload使用

    <html>
    <head>
        <title>Introduction to the DOM</title>
        <script>
        // We can't manipulate the DOM until the document
        // is fully loaded
        window.onload = function(){
    
            // Find all the <li> elements in the document
            var li = document.getElementsByTagName('li');
    
            // and add a ared border around all of them
            for ( var j = 0; j < li.length; j++ ) {
                li[j].style.border = '1px solid #000';
            }
    
            // Locate the element with an ID of 'everywhere'
            var every = document.getElementById( "everywhere" );
    
            // and remove it from the document
            every.parentNode.removeChild( every );
    
        };
        </script>
    </head>
    <body>
        <h1>Introduction to the DOM</h1>
        <p class="test">There are a number of reasons why the DOM is awesome, here are some:</p>
        <ul>
            <li id="everywhere">It can be found everywhere.</li>
            <li class="test">It's easy to use.</li>
            <li class="test">It can help you to find what you want, really quickly.</li>
    </ul> 
    </body>
    </html>

    使用Dom去掉了第一个li。只显示后面2个。

     改变以上的代码,可以有一个特效:

     <script>
        // We can't manipulate the DOM until the document
        // is fully loaded
        window.onload = function(){
    
            // Find all the <li> elements, to attach the event handlers to them
            var li = document.getElementsByTagName('li');
            for ( var i = 0; i < li.length; i++ ) {
    
                // Attach a mouseover event handler to the <li> element,
                // which changes the <li>s background to blue.
                li[i].onmouseover = function() {
                    this.style.backgroundColor = 'blue';
                };
    
                // Attach a mouseout event handler to the <li> element
                // which changes the <li>s background back to its default white
                li[i].onmouseout = function() {
                    this.style.backgroundColor = 'white';
                };
    
            }
    
        };
        </script>
  • 相关阅读:
    1
    webpack
    webpack32
    41324
    124
    CSS 32
    Git 分支管理
    Git 标签管理
    datetime的timedelta对象
    unittest中的testCase执行顺序
  • 原文地址:https://www.cnblogs.com/youxin/p/2630548.html
Copyright © 2011-2022 走看看