南强小屋 Design By 杰米
1.内联样式
内联样式分为两种,一是直接写入元素的标签内部
<html>
<title>js样式内联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<!--js内联写法01开始-->
<!--当鼠标点击图片时跳出弹窗显示1223-->
<div class="img">
单击事件:
<img src="/UploadFiles/2021-04-02/001.jpg">
二是写入到<script></script>标签中
给元素添加id
通过getElementById('XX');方法定位到该元素,给该元素添加触发事件
注意:<script></script>标签应该放在</body>之后
<html>
<title>js样式内联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<!--js内联写法02开始-->
<div class="img">
单击事件:
<img src="/UploadFiles/2021-04-02/002.jpg">
2.外联样式
将js的代码写到.js的文件中,并在HTML中引用
.html文件内容如下:
<html>
<title>js样式外联写法</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<body>
<div class="img">
外联写法--单击事件:
<img src="/UploadFiles/2021-04-02/003.jpg">
.js文件内容如下:
//js代码
//找到XX元素,一般给元素加id
yuansuojb=document.getElementById('yuansu');
//给xx元素加事件
yuansuojb.onclick=function(){
//代码段
var str="hello world !!!";
alert(str);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,HTML,引用
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无js在HTML的三种引用方式详解的评论...