JS动态

来源：互联网发布：老虎机算法作弊器编辑：程序博客网时间：2024/04/30 04:44

                              初识JS（添加动态）

一、流程：1.布局：html+css
      2.属性：修改属性
      3.事件：设计产品（用户操作）（onmouseover，onmouseout）
      4.编写js实现动态：用js来修改页面属性样式
---------------------------------------------------------------------------------------------
(onmouseover"alret() ":鼠标移上，
onmouseout" " ：鼠标移出)
---------------------------------------------------------------------------------------------
    onmouseover="div1.style.display='block';":
                      //属性       //赋值
相对的 onmouseout="document.getElementById('div1').style.display='none';":
                  /*增加浏览器兼容性，不可直接引用div的id*/
---------------------------------------------------------------------------------------------
document.get   Element   By   Id
         获取    元素     通过

***********通过指定的 id 来访问 HTML 元素，并改变其内容**********

二、JavaScript代码

    JavaScript 代码块
          JavaScript 语句通过代码块的形式进行组合。

     块由左花括号开始，由右花括号结束。

     块的作用是使语句序列一起执行。

     JavaScript 函数是将语句组合在块中的典型例子。

     实例
     function myFunction()
     {
        document.getElementById("demo").innerHTML="Hello World";
        document.getElementById("myDIV").innerHTML="How are you?";
      }

三、函数：

function tored(）
｛
   document.getElementById('div1').style.width='200px';

   document.getElementById('div1').style.height='300px';

   document.getElementById('div1').style.background='red';
｝
引用函数：例如，<div id="div1" onmouseover="tored()"></div>
     事例：：<!DOCTYPE html>
            <html>
            <head>
            <script>
            function myFunction()
            {
              alert("Hello World!");
            }
            </script>
            </head>

            <body>
            <button onclick="myFunction()">点击这里</button>
            </body>
            </html>

0 0