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. JAVA Android王牌教程

    Java基础 在Java基础系列文章中,我将说明Java的基础内容,特别是面向对象的相关概念. Java基础01 从HelloWorld到面向对象 Java基础02 方法与数据成员 Java基础03 ...

  2. 外文翻译 《How we decide》赛场上的四分卫 第四节

    这是第一章的最后一节. 书的导言 本章第一节 本章第二节 本章第三节 制作肥皂剧是非常不易的.整个制作组都要很紧张的工作,每天都要拍摄一些新的事件.新的大转折的剧情需要被想象出来,新的剧本需要被编写, ...

  3. Spring Mvc相关随笔

    web.xml部分 1.欢迎界面 <welcome-file-list> <welcome-file>/views/login.jsp</welcome-file> ...

  4. NGUI利用深度测试实现新手引导遮罩

    实现原理:实际上就是先利用渲染队列渲染,然后再利用ZTest,改变渲染的遮挡关系. PS:Depth Testing:深度测试,也叫深度缓冲.只有最靠近观察者的物体会被绘制.深度即Z,该值越小表示离观 ...

  5. mysql 的 case when then 用法 和null 的判断

    表:一个表 aa 有两个字段 id 和 sex ,第1条记录的sex 为空串  ('')  第二条记录的sex 为空  (null) 1. 用法: 第一种: select (case 字段名  whe ...

  6. node.js入门之二

    NPM 1.NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM ...

  7. vba根据部门分别汇总不同部门下的人员不同培训内容的时长总计,多条件求和

    Option Explicit Sub yy() Dim d, arr, s$, i&, m&, w$ Set d = CreateObject("Scripting.Dic ...

  8. 【java】查重类的实现

    import java.util.Vector; public class ElementCheck { // 重复优先 static Vector<Integer> CheckSameE ...

  9. 【转】Web 前沿——HTML5 Form Data 对象的使用

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.利用 FormData 对象,我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件,我们还可以使用 ...

  10. COMMIT - 提交当前事务

    SYNOPSIS COMMIT [ WORK | TRANSACTION ] DESCRIPTION 描述 COMMIT 提交当前事务. 所有事务的更改都将为其他事务可见,而且保证当崩溃发生时的可持续 ...