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="data:images/001.jpg" onclick="alert(1223)"></img>

		</div>

	<!--js内联写法01结束-->

	</body>

</html>

二是写入到<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="data: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文件内容如下：

<html>

	<title>js样式外联写法</title>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<body>

	<div class="img">

		外联写法--单击事件：

			<img src="data:images/003.jpg" id='yuansu'></img>

	</div>

	</body>

	<script src='js/index.js'></script>

</html>

.js文件内容如下：

//js代码

//找到XX元素，一般给元素加id

yuansuojb=document.getElementById('yuansu');

//给xx元素加事件

yuansuojb.onclick=function(){

	//代码段

	var str="hello world !!!";

	alert(str);

}

js在HTML中的三种写法的更多相关文章

  1. Angularjs中controller的三种写法

    在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中cont ...

  2. js中的三种函数写法

    js中的三种函数写法 <script type="text/javascript"> //普通的声明方式 function myFun(m,n){ alert(m+n) ...

  3. jquery 在页面中三种写法

    jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x ...

  4. js oop中的三种继承方法

    JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...

  5. (转)在网页中JS函数自动执行常用三种方法

    原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...

  6. 研究分析JS中的三种逻辑语句

    JS中的三种逻辑语句:顺序.分支和循环语句. 一.顺序语句 代码规范如下:1. <script type="text/javascript"> var a = 10;  ...

  7. 在网页中JS函数自动执行常用三种方法

    在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT   LANGUAGE="JavaScript">   function ...

  8. （转）Ext.Button点击事件的三种写法

    转自:http://maidini.blog.163.com/blog/static/377627042008111061844345/ ExtJs的写法太灵活了,现在收集了关于Button点击事件的 ...

  9. 链接属性rel=’external’、rel=’nofollow’、rel=’external nofollow’三种写法的区别

    链接属性rel='external'.rel='nofollow'.rel='external nofollow'三种写法的区别   大家应该都知道rel='nofllow'的作用,它是告诉搜索引擎, ...

随机推荐

  1. django 网站项目测试

    视图和 URL 配置: 在先前创建的 meishiweb目录下的 meishiweb 目录新建一个 view.py 文件,并输入代码: 此时在浏览器即可访问: 证明已经成功 我们也可以修改成以下的规则 ...

  2. 贪心 Codeforces Round #236 (Div. 2) A. Nuts

    题目传送门 /* 贪心:每一次选取最多的线段,最大能放置nuts,直到放完为止,很贪婪! 题目读不懂多读几遍:) */ #include <cstdio> #include <alg ...

  3. 题解报告：hdu 2844 & poj 1742 Coins（多重部分和问题）

    Problem Description Whuacmers use coins.They have coins of value A1,A2,A3...An Silverland dollar. On ...

  4. 第二个Struts2程序 应用动态Action

    1.创建web项目,添加struts2支持的类库,在web.xml中配置struts2过滤器. 2.创建名为UserAction的Action对象,并分别在其中编写add()和update()方法,用 ...

  5. 一个iOS开发者的修真之路

    在微信上有童鞋问我iOS开发者的入门标准是神马?这个问题难到我了,而且贸然给一个答案出来的话,必定会有万千高手来喷. 凡人修仙,仙人修道,道人修真.当我们还是一个在青石板上蹲马步汗水涔涔的废柴时,或许 ...

  6. ftp 上传与下载

    //上传 ftpmg.Upload("", DateTime.Now.ToString("yyyyMMddhhmmss")); //下载 ftpmg.Downl ...

  7. Redis和SpringDataRedis

    一.Redis简介 ​ Redis是用C语言开发的一个开源的高性能键值对(key-value)数据库,运行在内存中,由ANSI C编写.企业开发通常采用Redis来实现缓存.同类的产品还有memcac ...

  8. jdk线程池，使用手记

    Executors----------------------------------------------Executors------------------------------------ ...

  9. rem手机端页面自适应完美解决方案（最新）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. rem手机端页面自适应布局（待修正下一篇完美布局）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...