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. [转]广义正交匹配追踪(gOMP)

    广义正交匹配追踪(Generalized OMP, gOMP)算法可以看作为OMP算法的一种推广,由文献[1]提出,第1作者本硕为哈工大毕业,发表此论文时在Korea University攻读博士学位 ...

  2. bnu oj 13288 Bi-shoe and Phi-shoe

    题目链接: http://www.bnuoj.com/contest/problem_show.php?pid=13288 题目大意: 给出一个n,然后给出n个幸运数([1,m]中不能被m整除的数的数 ...

  3. 题解报告：hdu 1261 字串数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1261 Problem Description 一个A和两个B一共可以组成三种字符串:"ABB ...

  4. dalvik.system.VMRuntime 隐藏api的迷惑

    [Android UI界面]关于dalvik.system.VMRuntime 的 使用迷惑 我也遇到了相同问题.不知楼主现在解决了没有? 回答1: [Android UI界面]关于dalvik.sy ...

  5. 构建微服务开发环境5————安装Node.js

    [内容指引] 下载Node.js: Mac下安装Node.js: Windows下安装Node.js; 查看node和npm的版本. 一.下载Node.js 访问Node.js官网:https://n ...

  6. ReactJS-2-props vs state

    rops理解: 大多数组件都可以在创建的时候被不同的参数定制化,这些不同的参数就叫做props.props的流向是父组件到子组件. 子组件Comment,是一条评论组件,父组件CommentList, ...

  7. 原生开发之css样式问题(持续更新)

    ·移动端开发将div高度设置为设备高度 div{ Height:100vh; } · select选择器文字设置: /*select文字右对齐*/ select{ direction: rtl; } ...

  8. Microsoft SQL Server学习（二）

    目录 关于数据库的语法: 1.创建数据库 create database 数据库名 on primary (主文件属性(name,filename,size等)) -用逗号隔开次要主要文件和次要文件 ...

  9. vue2.0 动态切换组件

    组件标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件. <!DOCTYPE html> <html lang="en" ...

  10. php从mysql数据库中取数据

    php从数据库中取数据  面向过程 <?php $server_name="localhost:3306"; //数据库服务器名称 $username="root& ...