分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

js在HTML中的三种写法

发布时间:2023-09-06 01:15责任编辑:郭大石关键词:jsHTML

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="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="images/002.jpg" id=‘yuansu‘></img></div><!--js内联写法02结束--></body><script>//js代码//找到XX元素,一般给元素加idyuansuojb=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="images/003.jpg" id=‘yuansu‘></img></div></body><script src=‘js/index.js‘></script></html>

 .js文件内容如下:

//js代码//找到XX元素,一般给元素加idyuansuojb=document.getElementById(‘yuansu‘);//给xx元素加事件yuansuojb.onclick=function(){//代码段var str="hello world !!!";alert(str);}

js在HTML中的三种写法

原文地址:http://www.cnblogs.com/soulsjie/p/7634553.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved