第⼀个JS脚本的编写

最新推荐文章于 2024-04-27 17:42:57 发布

Mr.ZKH

最新推荐文章于 2024-04-27 17:42:57 发布

阅读量466

点赞数

本文链接：https://blog.csdn.net/weixin_44415461/article/details/99702884

版权

确定我们要做的⼀个效果是⿏标移⼊div背景颜⾊变成红⾊，⿏标
移出，背景颜⾊变回⽩⾊

第⼀步：我们要知道⿏标移⼊事件和⿏标移出事件
⿏标移⼊事件 onmouseover
⿏标移出事件 onmouseout

第⼆步：我们要找到需要改变的div元素
我们通过id就可以找到我们要改变的div

第三步：我们要对修改我们的css属性
js操作是跟我们的html标签的属性是⼀⼀对应的(只有⼀个
特例class，因为class是js的关键字，是类的意思)
计算机⾥⾯识别我们js⾥⾯ . 就是的的意思

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript第一个脚本文件</title>
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<script src="../js/jsdoc.js"></script>
</head>
<body>
	<div id="demo" onmousemove="from()" onmouseout="to()"></div>
</body>
</html>

css代码：

*{
	font-family: 微软雅黑;
	padding: 0px;
	margin: 0px;
}

#demo{
	width: 200px;
	height: 200px;
	border: 1px solid black;
	background: white;
	margin: 0 auto;
}

javaScript代码

//鼠标移入
function from(){
	var demo = document.getElementById('demo')
	demo.style.background='red'
}

//鼠标移出
function to(){
	var demo = document.getElementById('demo')
	demo.style.background='white'
}