zoukankan      html  css  js  c++  java
  • js在html中的三种写法

    1.内联样式

    内联样式分为两种,一是直接写入元素的标签内部

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html>
        <title>js样式内联写法</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <body>
        <!--js内联写法01开始-->
           <!--当鼠标点击图片时跳出弹窗显示1223-->
            <div class="img">
            单击事件:
                <img src="images/001.jpg" onclick="alert(1223)"></img>
            </div>
        <!--js内联写法01结束-->
        </body>
    </html>

     二是写入到<script></script>标签中

    给元素添加id

    通过getElementById('XX');方法定位到该元素,给该元素添加触发事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <html>
        <title>js样式内联写法</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <body>
        <!--js内联写法02开始-->
        <div class="img">
            单击事件:
                <img src="images/002.jpg" id='yuansu'></img>
        </div>
        <!--js内联写法02结束-->
        </body>
        <script>
            //js代码
            //找到XX元素,一般给元素加id  
            yuansuojb=document.getElementById('yuansu');       
            //给xx元素加事件
            yuansuojb.onclick=function(){
                //代码段
                alert(1);
            }
            //触发事件
        </script>
    </html>

     2.外联样式

    将js的代码写到.js的文件中,并在HTML中引用

    .html文件内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html>
        <title>js样式外联写法</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <body>
        <div class="img">
            外联写法--单击事件:
                <img src="images/003.jpg" id='yuansu'></img>
        </div>
        </body>
        <script src='js/index.js'></script>
    </html>

     .js文件内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //js代码
    //找到XX元素,一般给元素加id  
    yuansuojb=document.getElementById('yuansu');       
    //给xx元素加事件
    yuansuojb.onclick=function(){
        //代码段
        var str="hello world !!!";
        alert(str);
    }
  • 相关阅读:
    [NOI2004] 郁闷的出纳员
    [洛谷P4556] 雨天的尾巴
    【转】进程、线程、 GIL全局解释器锁知识点整理
    Python3中的SocketServer
    socket 上传文件代码
    python socket 连续send,出现粘包问题
    【转】动态导入模块的两种方法
    【转】面向对象高级语法部分
    python的垃圾回收机制和析构函数__del__
    django 项目使用setting文件里定义的变量方法
  • 原文地址:https://www.cnblogs.com/liangdong/p/9682859.html
Copyright © 2011-2022 走看看