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. C++中的四种强制类型转换符详解

    阅读目录 C++即支持C风格的类型转换,又有自己风格的类型转换.C风格的转换格式很简单,但是有不少缺点的: 转换太过随意,可以在任意类型之间转换.你可以把一个指向const对象的指针转换成指向非con ...

  2. 题解报告：hdu 2030 汉字统计

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2030 Problem Description 统计给定文本文件中汉字的个数. Input 输入文件首先 ...

  3. 影响TCP连接寿命的因素

    NAT超时 大部分移动无线网络运营商都在链路一段时间没有数据通讯时,会淘汰 NAT 表中的对应项,造成链路中断.NAT超时是影响TCP连接寿命的一个重要因素(尤其是国内),所以客户端自动测算NAT超时 ...

  4. 415 Add Strings 字符串相加

    给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和.注意:    num1 和num2 的长度都小于 5100.    num1 和num2 都只包含数字 0-9.    num1 和 ...

  5. Node.js——post方式提交的图片如何保存

    https://www.cnblogs.com/bruce-gou/p/6399766.html 没有使用express框架,主要是对于 request 的监听,data的时候对数据进行保存,end的 ...

  6. ubuntu命令行使用ftp客户端

    转载 本篇文章主要介绍在Ubuntu 8.10下如何使用功能强大的FTP客户端软件NcFTP. Ubuntu的源里为我们提供了FTP客户端软件NcFTP,可这款工具对新手来说不是很方便.本文介绍的是一 ...

  7. laravel模块 目录设计

  8. dom监听事件class

    layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; var $ = layui.j ...

  9. c Xcode has incompatible definitions in different translations units

    解决方案: build > setting enable module 改为No

  10. Java B

    3.继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么? 答:父类: package test; public class FatherClass { public FatherClass( ...