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);
    }
  • 相关阅读:
    异常日志以及非异常日志记录方法
    oracle 监测数据库是否存在指定字段
    listview禁止双击一条之后选中复选框按钮的方法
    oracle 的rowid和rownum
    修改文件的名字的写法
    使用C#读取XML节点,修改XML节点
    BZOJ 1004: [HNOI2008]Cards
    P5022 旅行 (NOIP2018)
    P5021 赛道修建 (NOIP2018)
    P5020 货币系统 (NOIP2018)
  • 原文地址:https://www.cnblogs.com/liangdong/p/9682859.html
Copyright © 2011-2022 走看看