1.内联样式

内联样式分为两种，一是直接写入元素的标签内部

  1. <html>
  2. 	<title>js样式内联写法</title>
  3. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4. 	<body>
  5. 	<!--js内联写法01开始-->
  6.        <!--当鼠标点击图片时跳出弹窗显示1223-->
  7. 		<div class="img">
  8. 		单击事件：
  9. 			<img src="data:images/001.jpg" onclick="alert(1223)"></img>
  10. 		</div>
  11. 	<!--js内联写法01结束-->
  12. 	</body>
  13. </html>

二是写入到<script></script>标签中

给元素添加id

通过getElementById('XX');方法定位到该元素，给该元素添加触发事件

注意：<script></script>标签应该放在</body>之后

  1. <html>
  2. 	<title>js样式内联写法</title>
  3. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4. 	<body>
  5. 	<!--js内联写法02开始-->
  6. 	<div class="img">
  7. 		单击事件：
  8. 			<img src="data:images/002.jpg" id='yuansu'></img>
  9. 	</div>
  10. 	<!--js内联写法02结束-->
  11. 	</body>
  12. 	<script>
  13. 		//js代码
  14. 		//找到XX元素，一般给元素加id
  15. 		yuansuojb=document.getElementById('yuansu');
  16. 		//给xx元素加事件
  17. 		yuansuojb.onclick=function(){
  18. 			//代码段
  19. 			alert(1);
  20. 		}
  21. 		//触发事件
  22. 	</script>
  23. </html>

2.外联样式

将js的代码写到.js的文件中，并在HTML中引用

.html文件内容如下：

  1. <html>
  2. 	<title>js样式外联写法</title>
  3. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4. 	<body>
  5. 	<div class="img">
  6. 		外联写法--单击事件：
  7. 			<img src="data:images/003.jpg" id='yuansu'></img>
  8. 	</div>
  9. 	</body>
  10. 	<script src='js/index.js'></script>
  11. </html>

.js文件内容如下：

  1. //js代码
  2. //找到XX元素，一般给元素加id
  3. yuansuojb=document.getElementById('yuansu');
  4. //给xx元素加事件
  5. yuansuojb.onclick=function(){
  6. 	//代码段
  7. 	var str="hello world !!!";
  8. 	alert(str);
  9. }

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. [POI2009]救火站Gas

    Description 给你一棵树,现在要建立一些消防站,有以下要求: 1. 消防站要建立在节点上,每个节点可能建立不只一个消防站. 2. 每个节点应该被一个消防站管理,这个消防站不一定建立在该节点上 ...

  2. Codeforces Round #318 [RussianCodeCup Thanks-Round] (Div. 2)

    以后每做完一场CF,解题报告都写在一起吧   暴力||二分 A - Bear and Elections 题意:有n个候选人,第一个候选人可以贿赂其他人拿到他们的票,问最少要贿赂多少张票第一个人才能赢 ...

  3. 题解报告：hdu 1236 排名

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1236 Problem Description 今天的上机考试虽然有实时的Ranklist,但上面的排名 ...

  4. 自动化中Java面试题

    1.面向对象的特征有哪些方面?答:面向对象的特征主要有以下几个方面:- 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这些 ...

  5. D. Winter Is Coming 贪心（好题）

    http://codeforces.com/contest/747/problem/D 大概的思路就是找到所有两个负数夹着的线段,优先覆盖最小的长度.使得那时候不用换鞋,是最优的. 但是这里有个坑点, ...

  6. 阿里云服务器 Access to the path '....' is denied.解决方法

    昨天公司项目迁移服务器,从自己服务器迁移到阿里云服务器,部署完成后发现有一个页面要读取磁盘上的静态文件就报错了... 如图: 解决办法: 在 Web.Config 的 <System.Web&g ...

  7. 关于TREEVIEW的ONSELECTEDNODECHANGED事件

    MSDN:http://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.treeview.selectednodechanged( ...

  8. qt 5中文乱码

    头文件加上#prama execution_character_set("utf-8")

  9. C/C++ new/delete []、内存泄漏、动态数组

    一.概念 new/delete是用于动态分配和撤销内存的运算符.new/delete是c++里才有的,c中是用malloc和free,c++虽然也可以用,但是不建议用.当我们使用关键字new在堆上动态 ...

  10. Divide and Conquer_1.最大连续子数组

    给定一个数组,求它的一个子数组,使其求和最大. 这个问题的应用:给定一只股票很多天的价格,计算从哪天买进哪天卖出能获得最大利润. 给定 prices:100   113   98   87   65  ...