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);
}
posted @ 2018-09-20 19:40  梁栋  阅读(2184)  评论(0)    收藏  举报