zoukankan      html  css  js  c++  java
  • 妙味——JS学前预热03

    (1)代码效果:

      主要是学习  函数

    (2)实现代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        #div{width: 100px;height: 100px;background: orange;}
    </style>
    </head>
    <body>
        <div id="div" onmouseover="document.getElementById('div').style.width='200px';document.getElementById('div').style.height='200px';document.getElementById('div').style.background='green';" onmouseout="document.getElementById('div').style.width='100px';document.getElementById('div').style.height='100px';document.getElementById('div').style.background='orange';" ></div>
    </body>
    </html>

    。。。。。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        #div{width: 100px;height: 100px;background: orange;}
    </style>
    <script>
        function toGreen(){
            document.getElementById('div').style.width='200px';
            document.getElementById('div').style.height='200px';
            document.getElementById('div').style.background='green';
        }
    
        function toRed(){
            document.getElementById('div').style.width='100px';
            document.getElementById('div').style.height='100px';
            document.getElementById('div').style.background='orange'; 
        }
    </script>
    </head>
    <body>
        <div id="div" onmouseover="toGreen()" onmouseout="toRed()"></div>
    </body>
    </html>


    /////////优化后的JS代码如下所示://///////
    <script>
        function toGreen(){
            var oDiv = document.getElementById('div');
    
            oDiv.style.width='200px';
            oDiv.style.height='200px';
            oDiv.style.background='green';
        }
    
        function toRed(){
            var oDiv = document.getElementById('div');
    
            oDiv.style.width='100px';
            oDiv.style.height='100px';
            oDiv.style.background='orange'; 
        }
    </script>
    
    
    
    
    
    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    iOS 界面翻转切换动画
    深度解析Objective-C笔试题
    Objective-C内存管理基础
    Objective-C入门教材
    Objective-C代码学习大纲(6)
    Objective-C代码学习大纲(5)
    Objective-C代码学习大纲(4)
    sharedPreferences
    ListView判断滑动底部
    Oracle 游标疑问
  • 原文地址:https://www.cnblogs.com/baixc/p/3417254.html
Copyright © 2011-2022 走看看