网页脚本语言第一节课9.19

文章目录

修改文本颜色
移出移入改变背景颜色
效果图自己去试试吧！

修改文本颜色

在这里插入图片描述

box里的文字从黑色变成了蓝色

移出移入改变背景颜色

嵌入式

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移入移出改变背景颜色title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: #ccc;
				margin: 100px auto;
			}
		style>
		<script type="text/javascript">
			//当页面加载完成时会自动激发onload事件
			window.onload = function(){
				//mouseover
				document.getElementById('box').onmouseover = function(){
					//DOM   元素.style.css属性名  = 属性值
					//document.getElementById('box').style.background = 'pink';
					//this.style.background-color = 'pink';  //错误，css属性名写法错误
					//background-color：backgroundColor
					this.style.backgroundColor = 'pink'; 
				}
				
				document.getElementById('box').onmouseout = function(){
					this.style.backgroundColor = '#ccc';
				}
			}
		script>
	head>
	<body>
		<h1>onload事件h1>
		<div id="box">div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

行内式

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移入移出改变背景颜色title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: #ccc;
				margin: 100px auto;
			}
		style>
	head>
	<body>
		<h1>js引入的方式三：行内式h1>
		<div id="box" onmouseover = 'this.style.backgroundColor="pink";' 
			onmouseout = 'this.style.backgroundColor="#ccc";'
		>div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

外联式

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移入移出改变背景颜色title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: #ccc;
				margin: 100px auto;
			}
		style>
	head>
	<body>
		<h1>js引入的方式二：外链式h1>
		<div id="box">div>
		<script src="first.js">script>
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

js代码

// 单行注释：只能写脚本代码   ctrl + /
/* 多行注释  ctrl + shift + /
鼠标移入移出改变背景颜色
mouseover/ mouseout
 */
//mouseover
document.getElementById('box').onmouseover = function(){
	//DOM   元素.style.css属性名  = 属性值
	//document.getElementById('box').style.background = 'pink';
	//this.style.background-color = 'pink';  //错误，css属性名写法错误
	//background-color：backgroundColor
	this.style.backgroundColor = 'pink'; 
}

document.getElementById('box').onmouseout = function(){
	this.style.backgroundColor = '#ccc';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果图自己去试试吧！

相关阅读:
print() 函数
TiDB的事务概览
（C++）何时使用引用、指针、按值传递作为参数的方法——（巧级好用的总结方法）
第十八章：Swing自述
授权规则及规则持久化
java计算机毕业设计会展中心招商服务平台MyBatis+系统+LW文档+源码+调试部署
MySQL存储过程详解与案例应用
我服了！SpringBoot升级后这服务我一个星期都没跑起来！（下）
HiveSQL源码之语法词法编译文件解析一文详解
[SpringMVC笔记] SpringMVC-16-拦截器入门

原文地址：https://blog.csdn.net/qq_62512326/article/details/126930380