前端基础——JavaScript（WebAPI）（上篇）-171主机测评

WebAPI背景知识

什么是WebAPI

什么是API

API参考文档

DOM基本概念

什么是DOM

DOM树

获取元素

querySelector

querySelectorAII

事件初识

基本概念

事件三要素

简单示例

键盘事件

onkeydown

onkeypress

onkeyup

注意事项

操作元素

获取/修改元素内容

1.innerText

2.innerHTML

获取/修改元素属性

课件内容

获取/修改表单元素属性

代码示例：切换按钮的文本

代码示例：点击计数

代码示例：全选/取消全选按钮

获取/修改样式属性

行内样式操作

代码示例：点击文字则放大字体

类名样式操作

代码示例：开启夜间模式

WebAPI背景知识

什么是WebAPI

前面学习的 JS 分成三个大的部分

ECMAScript: 基础语法部分

DOM API: 操作页面结构

BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM.

这个是 W3C 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人).

前面学的 JS 基础语法主要学的是 ECMAScript, 这让我们建立基本的编程思维. 相当于练武需要先扎马步.

但是真正来写一个更加复杂的有交互式的页面, 还需要 WebAPI 的支持. 相当于各种招式.

什么是API

API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM

所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发

相当于一个工具箱. 只不过程序猿用的工具箱数目繁多, 功能复杂

API参考文档

API 参考文档

可以在搜索引擎中按照 "MDN + API 关键字" 的方式搜索, 也能快速找到需要的 API 文档

DOM基本概念

什么是DOM

DOM 全称为 Document Object Model.

W3C 标准给我们提供了一系列的函数, 让我们可以操作:

网页内容

网页结构

网页样式

DOM树

一个页面的结构是一个树形结构, 称为 DOM 树.

树形结构在数据结构阶段会介绍. 就可以简单理解成类似于 "家谱" 这种结构

页面结构形如:

DOM 树结构形如

重要概念:

文档: 一个页面就是一个文档, 使用 document 表示.

元素: 页面中所有的标签都称为元素. 使用 element 表示.

节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node表示.

这些文档等概念在 JS 代码中就对应一个个的对象.

所以才叫 "文档对象模型"

获取元素

这部分工作类似于 CSS 选择器的功能

获取元素的方式有很多种，但是最强大的就是两种：querySelector 和 querySlectorAll，后续我们获取元素都可以通过这两种方式来获取~~

querySelector

这个是 HTML5 新增的, IE9 及以上版本才能使用.

前面的几种方式获取元素的时候都比较麻烦. 而使用 querySelector 能够完全复用前面学过的 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象

先来解释一下什么是 document，代码展示👇

我们打开 F12后在控制台输入 document 并回车，鼠标放在 document 上就能发现把整个页面都给选中了，效果展示👇

此时我们就可以对这整个页面进行元素的获取了~~

下面我们获取一下 box1，代码展示👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<h3><span><input type="text"></span></h3>
</body>
<script>
console.log(document.querySelector('.box1'))
</script>
</html>

此时我们就会发现在控制台打印了 box1，效果展示👇

但也要注意，这里的选择器表达式必须是合法的，如果写成下面这样👇

console.log(document.querySelector('?1111111'))

就会报错，告诉你这个表达式不是一个可用的选择器表达式👇

但如果写成 .class111 呢？？👇

console.log(document.querySelector('.class111'))

没有找到选择器选择的元素，元素就是 null，效果展示👇

注意，这个元素还可以针对我们的一个父级元素去查找它下面的子级元素

代码展示👇

//获取 h3 标签下的 span 标签
console.log(document.querySelector('h3').querySelector('span'))

效果展示👇

进一步的也可以找到 input 标签👇

//找到 h3 标签，再找到 span 标签，最后找到 input 标签
console.log(document.querySelector('h3').querySelector('span').querySelector('input'))

效果展示👇

注意 document 是一个全局变量，意味着在 script 标签里面都可以使用~~

var element = document.querySelector(selectors);

selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString 。该字符串必须是有效的

CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常

表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.

如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()

可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素

正因为参数是选择器, 所以一定要通过特殊符号指定是哪种选择器.

例如 .box 是类选择器, #star 是 id 选择器等.

<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
var elem1 = document.querySelector('.box');
console.log(elem1);
var elem2 = document.querySelector('#id');
console.log(elem2);
var elem3 = document.querySelector('h3 span input');
console.log(elem3);
</script>

querySelectorAII

querySelector 只用于选中一个元素，而querySelectorAII 用于选中一组元素

使用 querySelectorAll 用法和上面类似

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<h3><span><input type="text"></span></h3>
</body>
<script>
// console.log(document.querySelector('.class111'))
// //找到 h3 标签，再找到 span 标签，最后找到 input 标签
// console.log(document.querySelector('h3').querySelector('span').querySelector('input'))
console.log(document.querySelectorAll('div'))
</script>
</html>

效果展示👇

事件初识

基本概念

JS 要构建动态页面, 就需要感知到用户的行为.（就是需要给出反馈~~）

用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作

浏览器就是一个哨兵, 在侦查敌情(用户行为). 一旦用户有反应(触发具体动作), 哨兵就会点燃烽火台的狼烟(事件), 后方就可以根据狼烟来决定下一步的对敌策略

事件三要素

1. 事件源: 哪个元素触发的

2. 事件类型: 是点击, 选中, 还是修改?

3. 事件处理程序: 进一步如何处理. 往往是一个回调函数

简单示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button"value="这是一个按钮">
</body>
<script>
//给上面的按钮绑定事件源
let button = document.querySelector('input')
//绑定事件类型(点击事件)
//函数设定了事件处理程序
button.onclick = function(){
alert("Hello")
}
</script>
</html>

我们点击按钮之后，就会弹窗”Hello“👇

btn 按钮就是事件源.

点击就是事件类型

function 这个匿名函数就是事件处理程序

其中 btn.onclick = function() 这个操作称为注册事件/绑定事件

注意: 这个匿名函数相当于一个回调函数, 这个函数不需要程序猿主动来调用, 而是交给浏览器, 由浏览器自动在合适的时机(触发点击操作时) 进行调用~~

键盘事件

HTML DOM 事件可以参考手册 W3school👇

下面我们着重学习一下 keydown 事件👇

①onkeydown：事件在用户按下某个键（在键盘上）时发生

②onkeypress：事件在用户按下键（在键盘上）时发生

③onkeyup：事件在用户释放键（在键盘上）时发生

onkeydown

（1）下面我们用代码演示一下，当我们在文本框中按下数字之后，在控制台打印出来我键盘按下的字符串👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
</body>
<script>
//事件源
let input = document.querySelector('input')
input.onkeydown = function(){
console.log("我的键盘正在按下")
}
</script>
</html>

效果展示👇

其中 11 代表按键盘的次数~~

（2）上述代码中，我们只能知道是否按键了，但是按的是哪个字母我们却不知道，如何知道呢，下面用代码来演示一下👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
</body>
<script>
//事件源
let input = document.querySelector('input')
//event 是一个全局变量，通过它可以获取到我们当前事件里面所有的一些属性、一些信息了
input.onkeydown = function(event){
console.log("我的键盘正在按下")
let a = event.keyCode;
console.log(a)
}
</script>
</html>

效果展示👇

我们发现此时打印的是按键的编码，如果想把这个编码转换成按键的字母的话，就需要用到 String.fromCharCode()👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
</body>
<script>
//事件源
let input = document.querySelector('input')
//event 是一个全局变量，通过它可以获取到我们当前事件里面所有的一些属性、一些信息了
input.onkeydown = function(event){
console.log("我的键盘正在按下")
let a = event.keyCode;
let b = String.fromCharCode(a)
console.log(b)
}
</script>
</html>

效果展示👇

onkeypress

上述代码获取字母的时候是不区分大小写的，无论输入小写字母还是大写字母，都会打印大写字母，那么如何避免这个问题呢？？引入 onkeypress

我们只需要将上述代码中的 onkeydown 改成 onkeypress 就行了👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
</body>
<script>
//事件源
let input = document.querySelector('input')
//event 是一个全局变量，通过它可以获取到我们当前事件里面所有的一些属性、一些信息了
input.onkeypress = function(event){
console.log("我的键盘正在按下")
let a = event.keyCode;
let b = String.fromCharCode(a)
console.log(b)
}
</script>
</html>

效果展示👇

onkeydown 和 onkeypress 之间的区别还有其他的，但是目前为止，我们了解到这一点就行了，我们重点掌握 onkeydown 即可~~

onkeyup

现在需求为：当输入信息中第一个按键弹起的时候，此时给我一个 alert 提示，或者在控制台给我打印一个字符串，提示我们某一个按键被抬起来了

代码展示👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//绑定事件，抬起的时候才触发
<input type="text" onkeyup="myOnkeyUp()">
</body>
<script>
//事件源
let input = document.querySelector('input')
input.onkeypress = function(event){
console.log("我的键盘正在按下")
let a = event.keyCode;
let b = String.fromCharCode(a)
console.log(b)
}
function myOnkeyUp(){
console.log("按键被抬起")
}
</script>
</html>

效果展示👇

我们发现，当连续按 a 不放时没有提示，一旦把按键抬起来后才会有提示~~

注意事项

并不是所有键都能触发 onkeypress 事件

还是上面的代码，我们直接给出相继按下 shift 和 alt 键的效果👇

我们发现，并没有打印我们的按键，这时候我们就需要用到以下键来判断👇（文档链接）

下面我们在代码中用 shift 和 alt 键来演示一下👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" onkeyup="myOnkeyUp()">
</body>
<script>
let input = document.querySelector('input')
input.onkeydown = function(event){
//如果按键按下的是 shift,就弹出一个弹窗，提示 shift 被按下
if(event.shiftKey){
alert("shift键被按下")
}
//如果按键按下的是 alt,就弹出一个弹窗，提示 alt 被按下
if(event.altKey){
alert("alt键被按下")
}
}
</script>
</html>

效果展示👇

操作元素

获取/修改元素内容

1.innerText

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

// 读操作

var renderedText = HTMLElement.innerText;

// 写操作

HTMLElement.innerText = string;

不识别 html 标签. 是非标准的(IE发起的). 读取结果不保留html源码中的换行和空格

<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取 div 内部内容
console.log(div.innerText);
// 修改 div 内部内容, 界面上就会同步修改
div.innerText = 'hello js <span>hello js</span>';
</script>

可以看到, 通过 innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容.

修改页面的时候也会把 span 标签当成文本进行设置

2.innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代

// 读操作
var content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;

1. 先获取到事件源的元素

2. 注册事件

识别 html 标签. W3C 标准的. 读取结果保留html源码中的换行和空格

<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取页面内容
console.log(div.innerHTML);
// 修改页面内容
div.innerHTML = '<span>hello js</span>'
</script>

可以看到 innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行

innerHTML 用的场景比 innerText 更多

获取/修改元素属性

代码展示👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" onkeyup="myOnkeyUp()">
<span>这是一个span标签</span>
<img src="./蚩梦意难平.png" alt="图片加载失败"title="这是一个情怀图片" width="100px" height="100px">
</body>
<script>
let input = document.querySelector('input')
input.onkeydown = function(event){
//如果按键按下的是 shift,就弹出一个弹窗，提示 shift 被按下
if(event.shiftKey){
alert("shift键被按下")
}
//如果按键按下的是 alt,就弹出一个弹窗，提示 alt 被按下
if(event.altKey){
alert("alt键被按下")
}
}

let img = document.querySelector('img')
//dir 可以获取到当前对象的所有属性
console.dir(img)
</script>
</html>

我们发现，我们图片上设置的属性全部生效了，效果展示👇

如果要修改 title 的话，我们就可以拿到这个对象来修改，代码展示👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" onkeyup="myOnkeyUp()">
<span>这是一个span标签</span>
<img src="./蚩梦意难平.png" alt="图片加载失败"title="这是一个情怀图片" width="100px" height="100px">
</body>
<script>
let input = document.querySelector('input')
input.onkeydown = function(event){
//如果按键按下的是 shift,就弹出一个弹窗，提示 shift 被按下
if(event.shiftKey){
alert("shift键被按下")
}
//如果按键按下的是 alt,就弹出一个弹窗，提示 alt 被按下
if(event.altKey){
alert("alt键被按下")
}
}

let img = document.querySelector('img')
//dir 可以获取到当前对象的所有属性
console.dir(img)
img.title = "这是不良人们的意难平~~"
</script>
</html>

效果展示👇

下面我们来绑定点击事件，代码展示👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" onkeyup="myOnkeyUp()">
<span>这是一个span标签</span>
<img src="./蚩梦意难平.png" alt="图片加载失败"title="这是一个情怀图片" width="100px" height="100px">
</body>
<script>
let input = document.querySelector('input')
input.onkeydown = function(event){
//如果按键按下的是 shift,就弹出一个弹窗，提示 shift 被按下
if(event.shiftKey){
alert("shift键被按下")
}
//如果按键按下的是 alt,就弹出一个弹窗，提示 alt 被按下
if(event.altKey){
alert("alt键被按下")
}
}

let img = document.querySelector('img')
//dir 可以获取到当前对象的所有属性
console.dir(img)
img.title = "这是不良人们的意难平~~"
img.onclick = function(){
alert("你已经点击了这个图片")
}
</script>
</html>

效果展示👇

课件内容

可以通过 Element 对象的属性来直接修改, 就能影响到页面显示效果

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
console.dir(img);
</script>

此时可以看到 img 这个 Element 对象中有很多属性

我们可以在代码中直接通过这些属性来获取属性的值

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
// console.dir(img);
console.log(img.src);
console.log(img.title);
console.log(img.alt);
</script>

还可以直接修改属性

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
img.onclick = function () {
if (img.src.lastIndexOf('rose.jpg') !== -1) {
img.src = './rose2.png';
} else {
img.src = './rose.jpg';
}
}
</script>

此时点击图片就可以切换图片显示状态. (需要提前把两个图片准备好)

获取/修改表单元素属性

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

value: input 的值.

disabled: 禁用

checked: 复选框会使用

selected: 下拉框会使用

type: input 的类型(文本, 密码, 按钮, 文件等)

代码示例：切换按钮的文本

假设这是个播放按钮, 在 "播放" – "暂停" 之间切换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="btn" type="button" value="播放" onclick="Onclick()">
</body>
<script>
let btn = document.querySelector('.btn')
// 当按钮的 value = 播放，此时将按钮 value 变成暂停
// 否则变成播放
function Onclick(){
if(btn.value == "播放"){
btn.value = "暂停"
}else{
btn.value = "播放"
}
}
</script>
</html>

效果展示👇

点击后👇

代码示例：点击计数

使用一个输入框输入初始值(整数). 每次点击按钮, 值 + 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="input" type="text" name="" id="" value="0">
<input class="add" type="button" value="+1" onclick="Add()">
<input class="min" type="button" value="-1" onclick="Min()">
</body>
<script>
function Add(){
//要想对数进行加减操作，需要先获取输入框
let input_element = document.querySelector('.input')
//细节：先转换成数字，再进行加法操作
input_element.value = parseInt(input_element.value) + 1
}
//跟加法一样，得到减法的代码
function Min(){
let input_element = document.querySelector('.input')
input_element.value = parseInt(input_element.value) – 1
}
</script>
</html>

效果展示👇

input 具有一个重要的属性 value, 这个 value 决定了表单元素的内容

如果是输入框, value 表示输入框的内容, 修改这个值会影响到界面显式; 在界面上修改这个值也会影响到代码中的属性

如果是按钮, value 表示按钮的内容. 可以通过这个来实现按钮中文本的替换

代码示例：全选/取消全选按钮

1. 点击全选按钮, 则选中所有选项

2. 只要某个选项取消, 则自动取消全选按钮的勾选状态

</script>
</html>

此时我们要想爽吃第一，全都要，但是此时却没有全选，效果展示👇

下面我们来实现第一个效果：我们选择全都要的时候，把下面的子选项全部选中

分析：①点击事件②事件源是”俺全都要“这个元素

</script>
</html>

效果展示👇（这里我们看看效果而已）

效果展示👇

但此时我们只是完成了一部分，因为当我们取消任意一个的时候，”俺全都要“还是勾着的👇

所以每一个选项都需要绑定一个点击事件，以达到预期效果~~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!– 绑定点击事件 –>
<input class="all" type="checkbox" onclick="SelectAll()"> 俺全都要<br>
<input type="checkbox" class="select"> 三星冰女<br>
<input type="checkbox" class="select"> 四星铁男<br>
<input type="checkbox" class="select"> 三星亚恒<br>
<input type="checkbox" class="select"> 三星岩宝<br>
</body>
<script>
let all = document.querySelector('.all')
//选中所有
let select = document.querySelectorAll('.select')
//打印一下对象的属性
console.dir(all)
function SelectAll(){
//把所有子选项设置成父选项一样的值
for(i=0;i<select.length;i++){
select[i].checked = all.checked
}
}
//一个个写 onclick 不现实，我们使用 for 循环来绑定
for(i=0;i<select.length;i++){
select[i].onclick = function(){
//检查是否选中了全部
all.checked = IsSelectAll(select)
}
}
function IsSelectAll(select){
for(i=0;i<select.length;i++){
if(select[i].checked == false){
//其中有一个未被选中，父选项就不能被选中
return false
}
}
return true
}
</script>
</html>

效果展示👇

选项页面演示

获取/修改样式属性

CSS 中指定给元素的属性, 都可以通过 JS 来修改

行内样式操作

element.style.[属性名] = [属性值];

element.style.cssText = [属性名+属性值];

"行内样式", 通过 style 直接在标签上指定的样式. 优先级很高.

适用于改的样式少的情况

代码示例：点击文字则放大字体

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="font-size: 10px;">哈哈哈</div>
</body>
<script>
//选中元素
let element = document.querySelector('div')
//查看属性
console.log(element.style)
let size = element.style.fontSize
//打印出来是 string 类型
console.log(typeof(size))
</script>
</html>

此时的效果展示👇

我们需要把 string 转成整型，再进行操作👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!– 绑定点击事件 –>
<div style="font-size: 10px;" onclick="changeSize()">哈哈哈</div>
</body>
<script>
function changeSize(){
//选中元素
let element = document.querySelector('div')
//查看属性
console.log(element.style)
let size = parseInt(element.style.fontSize) + 10

element.style.fontSize = size + "px"
}
</script>
</html>

此时我们每一次点击都会放大 10 像素了👇

第二种写法👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!– 绑定点击事件 –>
<div style="font-size: 10px;" onclick="changeSize()">哈哈哈</div>
</body>
<script>
function changeSize(){
//选中元素
let element = document.querySelector('div')
//查看属性
console.log(element.style)
let size = parseInt(element.style.fontSize) + 10
//只有下面这行变了~~
element.style.cssText = "font-size:" + size + "px"
// element.style.fontSize = size + "px"
}
</script>
</html>

效果跟上面是一样的~~

style 中的属性都是使用驼峰命名的方式和 CSS 属性对应的.

例如: font-size => fontSize, background-color => backgroundColor 等

这种方式修改只影响到特定样式, 其他内联样式的值不变👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 把字体大小放在内部样式表里面，element.style.cssText 就不起作用了 */
div{
font-size: 10px;
}
</style>
</head>
<body>
<!– 绑定点击事件 –>
<div onclick="changeSize()">哈哈哈</div>
</body>
<script>
function changeSize(){
//选中元素
let element = document.querySelector('div')
//查看属性
console.log(element.style)
let size = parseInt(element.style.fontSize) + 10

//只有下面这行变了~~
element.style.cssText = "font-size:" + size + "px"
// element.style.fontSize = size + "px"
}
</script>
</html>

此时无论我们怎么点，字体都不能放大了👇

所以这种写法只能影响到对应的内联样式，如果要针对上述写法进行一下样式的修改，就需要用到下面的知识了👇

类名样式操作

element.className = [CSS 类名];

修改元素的 CSS 类名. 适用于要修改的样式很多的情况.

由于 class 是 JS 的保留字, 所以名字叫做 className

代码示例：开启夜间模式

点击页面切换到夜间模式(背景变成黑色)

再次点击恢复日间模式(背景变成白色)

此时的效果展示👇

接下来我们要实现：点击这段话的时候，切换成夜间模式，背景和字体颜色同时变化👇

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.light{
background-color: aliceblue;
color: black;
width:100%;
height:100%;
}
body,html{
width:100%;
height:100%;
}
.dark{
background-color: black;
color:white;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="light" onclick="changeStyle()">
这是一段话<br>
这是一段话<br>
这是一段话<br>
这是一段话<br>
这是一段话<br>
这是一段话<br>
</div>
</body>
<script>
function changeStyle(){
let element = document.querySelector('div')
// 如果当前样式是白天模式，此时就将其样式切换成黑夜模式
// 否则就将当前样式调整成白天样式
console.log(element.className)
}
</script>
</html>

此时我们点击发现，控制台输出的是 light 👇那么就意味着我们只要设置成在点击后变成 black 就行了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.light{
background-color: aliceblue;
color: black;
width:100%;
height:100%;
}
body,html{
width:100%;
height:100%;
}
.dark{
background-color: black;
color:white;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="light" onclick="changeStyle()">
这是一段话<br>
这是一段话<br>
这是一段话<br>
这是一段话<br>
这是一段话<br>
这是一段话<br>
</div>
</body>
<script>
function changeStyle(){
let element = document.querySelector('div')
// 如果当前样式是白天模式，此时就将其样式切换成黑夜模式
// 否则就将当前样式调整成白天样式
console.log(element.className)
if(element.className == "light"){
element.className = "dark"
}else{
element.className = "light"
}
}
</script>
</html>

效果展示👇

夜间模式切换

WebAPI背景知识

什么是WebAPI

什么是API

API参考文档

DOM基本概念

什么是DOM

DOM树

获取元素

querySelector

querySelectorAII

事件初识

基本概念

事件三要素

简单示例

键盘事件

onkeydown

onkeypress

onkeyup

注意事项

操作元素

获取/修改元素内容

1.innerText

2.innerHTML

获取/修改元素属性

课件内容

获取/修改表单元素属性

代码示例：切换按钮的文本

代码示例：点击计数

代码示例：全选/取消全选按钮

获取/修改样式属性

行内样式操作

代码示例：点击文字则放大字体

类名样式操作

代码示例：开启夜间模式

相关推荐

评论 抢沙发

热门标签

热门文章

最新文章

归档

分类

评论抢沙发