网页脚本语言第一节课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

效果图自己去试试吧！

相关阅读:
爱上源码，重学Spring MVC深入
【路径规划-多式联运】基于遗传算法求解多式联运冷链运输成本优化问题附matlab代码
STM32CubeMX ADC参数配置页中文注解
Hadoop学习1：概述、单体搭建、伪分布式搭建
十个超级有用的JavaScript的高阶面试技巧！
青少年python系列 44.面向对象-多态
kafka安装与相关配置详解
仿函数：对优先级队列的优化【C++】
Blazor 拖放上传文件转换格式并推送到浏览器下载
自动化测试生命周期

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