前端学习-操作元素属性（二十三）

前言

假期快乐，大家加油

操作元素属性

操作元素常用属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片最常见的属性

比如:href、title、src等语法:对象.属性 = 值

const pic = document.querySelector('img');pic.src = './images/b0.jpg'pic.title='刘德华黑马演唱会'

案例：网站图片的刷新

<body><img src="./images/1.webp" alt=""<script>//取到N~M 的随机整数function getRandom(N,M){return Math.floor(Math.random()*(M-N+1))+NI11.获取图片对象const img = document.querySelector('img')/12.随机得到序号const random=getRandom(1,6)113.更换路径img.src=./images/${random}.webp</script></body>

操作元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。

比如通过轮播图小圆点自动更换颜色样式点击按钮可以滚动图片，这是移动的图片的位置left等等

通过 style 属性操作CSS

语法

对象.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><style> .box { width: 200px; height: 200px; background-color: aqua; }</style></head><body><div class="box"></div><script> const box = document.querySelector('.box'); box.style.width = '300px'; box.style.height = '300px'; box.style.backgroundColor = 'red'; box.style.border = '2px solid black'</script></body></html>

操作类名(className)操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。语法://active 是一个css类名元素.className ='active'注意:由于class是关键字，所以使用className去代替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> .box { width: 200px; height: 200px; background-color: aqua; } .boxone { width: 300px; height: 300px; background-color: red; border: 2px solid black; margin: 10px; }</style></head><body><div class="box"></div><script> const box = document.querySelector('.box'); div.className = 'boxone';</script></body></html>

通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法格式

// 追加一个类 类名不加点，并且是字符串元素.classList.add('类名')// 删除一个类 类名不加点，并且是字符串元素.classList.remove('类名')// 切换一个类 有该类删除，没有添加，总之切换元素.classList.toggle('类名')

示例：

<!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> .box { width: 200px; height: 200px; background-color: aqua; } .boxone { width: 300px; height: 300px; background-color: red; border: 2px solid black; margin: 10px; }</style></head><body><div class="box boxone"></div><script> const box = document.querySelector('.box'); //添加classList.add('boxone'); //box.classList.add('boxone'); //console.log(box.classList); //删除classList.remove('boxone'); //box.classList.remove('boxone'); //console.log(box.classList); //切换classList.toggle('boxone'); box.classList.toggle('boxone'); console.log(box.classList);</script></body></html>

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框正常的有属性有取值的跟其他的标签属性没有任何区别自定义属性

语法

获取：DOM对象.属性名

设置：DOM对象.属性名=新值

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性比如:disabled、checked、selected

代码示例

<!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="checkbox" id="checkbox" checked><button id="submit-button">提交</button> <!-- 移除 disabled 属性 --><script> document.addEventListener('DOMContentLoaded', () => { const checkbox = document.querySelector('#checkbox'); const button = document.querySelector('#submit-button'); //const input = document.querySelector('input'); //input.type = 'password'; //input.value = '123'; //input.addEventListener('input', () => { // console.log(input.value); //}); // 初始状态检查 console.log(button.disabled); // 输出 false console.log(checkbox.checked); // 输出 true // 设置按钮的初始状态 button.disabled = !checkbox.checked; // 监听复选框的变化 checkbox.addEventListener('change', () => { button.disabled = !checkbox.checked; console.log(button.disabled); // 输出按钮的禁用状态 console.log(checkbox.checked); // 输出复选框的选中状态 }); });</script></body></html>

自定义属性

标准属性: 标签天生自带的属性比如class id title等,可以直接使用点语法操作比如: disabled、checked、selected自定义属性:

在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取

例如：

<body><div class="box" data-id="10">盒子</div><script>const box= document.querySelector('.box')；console.log(box.dataset.id)</script></body>

示例代码

<!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 data-id="1" data-spm="不知道">1</div><div data-id="2">2</div><div data-id="3">3</div><script> const one = document.querySelector('div'); console.log(one.dataset.id); console.log(one.dataset.spm);</script></body></html>

one.dataset 访问 one 元素的自定义数据属性。
dataset 对象包含所有以 data- 开头的属性，属性名会自动转换为驼峰命名法（camelCase）。

自定义数据属性 (data-* 属性)：
- 自定义数据属性允许你在 HTML 元素中存储额外的数据，这些数据可以通过 JavaScript 访问和操作。
- 自定义数据属性的名称必须以 data- 开头，后面可以是任意有效的属性名。
data-id 属性：
- data-id 是一个常见的自定义数据属性，通常用于标识元素的唯一 ID 或其他相关的标识信息。
- 你可以根据需要为元素添加 data-id 属性，并在 JavaScript 中访问其值
- data-spm 是一个自定义属性，通常用于特定的用途，例如标识元素的来源、跟踪代码、广告标识等。
- 具体用途取决于项目的需求和约定。