前言
假期快乐，大家加油
操作元素属性
操作元素常用属性
还可以通过 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是一个自定义属性，通常用于特定的用途，例如标识元素的来源、跟踪代码、广告标识等。具体用途取决于项目的需求和约定。
总结
山外有山，楼外有楼，各位仍需打磨，互相加油