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. CF1119F Niyaz and Small Degrees

    题意 给你\(n\)个点的树,边有边权 问使得所有的点度数都小于等于\(x\)的最小删边的代价 \([x \in 0...n-1]\) 题解 首先对于每个\(x\) 可以有一个\(O(nlogn)\) ...

  2. snort + barnyard2如何正确读取snort.unified2格式的数据集并且入库MySQL（图文详解）

    不多说,直接上干货! 为什么,要写这篇论文? 是因为,目前科研的我,正值研三,致力于网络安全.大数据.机器学习研究领域! 论文方向的需要,同时不局限于真实物理环境机器实验室的攻防环境.也不局限于真实物 ...

  3. C#控件置于底层或顶层

    btn.BringToFront();//置于顶层 btn.SendToBack();//置于底层

  4. Swift 基础语法入门(一)

    一.变量和常量 1.声明常量和变量 用let来声明常量  let radius = 10 用var来声明变量 var age = 20   或者是var x = 0.0, y = 0.0, z = 0 ...

  5. iOS programming Code Snippet Library

    iOS programming  Code Snippet Library  The freebie code comes from the code snippet library. 代码来自cod ...

  6. JVM 优点与缺点的深入分析

    Java 最初诞生的时候,它可以说是其他语言的进化版.不仅因为Java很简单,而且这一进化的语言还是一个可以运行第三方硬件字节码的虚拟机.它还是垃圾收集站,从而令存储管理和内核转储(core dump ...

  7. hibernate 批量抓取

    使用场景: 是查询出来一个集合,然后又查询每个集合对象中的集合.使用set标签中的batch-size属性实现. 数据库中只有5个区道信息: 设置batch-size=”5”,执行的查询语句如下: 而 ...

  8. bat2exe 就是这么简单 白研究半天VC++了

    bat2exe 就是这么简单 白研究半天VC++了 结果:bat2exe编译的执行文件会被杀毒软件查杀.

  9. 配置个人Ip代理池

    做爬虫最害怕的两件事一个是被封账户一个是被封IP地址,IP地址可以使用代理来解决,网上有许多做IP代理的服务,他们提供大量的IP地址,不过这些地址不一定都是全部可用,因为这些IP地址可能被其他人做爬虫 ...

  10. 【计算机网络】2.5 DNS：因特网的目录服务

    第二章第五节 因特网的目录服务 DNS(域名系统)提供了一种能运行主机名到IP地址转换的因特网目录服务:一方面,他让人能够记住如taobao.com这样的主机别名:另一方面,他提供给路由器可理解的IP ...