本文详细介绍了如何使用DOM操作修改HTML元素的样式，包括内联样式、样式表中的样式以及通过class批量修改多个属性。同时，讨论了getComputedStyle方法获取计算后样式的使用，并展示了带样式的表单验证示例，强调了修改样式时避免直接修改样式表和利用class切换样式以提高效率。最后，探讨了HTML5中classList属性用于添加、删除和切换元素类名的方法。
目录
(6). 解决: 通过修改class，批量修改一个元素的多个css属性。——划算
【前文回顾】👉 DOM操作之如何修改元素的内容与属性_02
一. 修改: 3种
1. 元素内容: 3种
2. 元素属性: 3种
3. 元素样式:
(1). 修改内联样式
a. 元素.style.css属性名="属性值"
b. 相当于: 修改HTML中<元素>的style属性内的某个css属性的值
<元素 style="css属性名:属性值">
c. 问题: 有些css属性名是带-的，但是js中除了减法计算之外，不允许随便写-。会混淆
d. 解决: DOM标准规定，所有带-的css属性名，一律去横线变驼峰:
比如: z-index -> zIndex
font-size -> fontSize
(2). 修改样式表中的样式
a. 强烈不建议直接修改样式表中的样式，因为样式表中的样式是共用的，一旦随意修改，会牵一发而动全身！
b. 如果针对一个元素，确实想改变样式表中继承或层叠来的样式，应该也修改内联样式:
1). 因为内联样式优先级最高！可以覆盖样式表中的样式
2). 因为内联样式只影响当前一个元素，不会影响其他元素。
(3). 示例: 修改元素的内联样式和样式表中的样式
0_style.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>
<style>
h1 {
background-color: red;
}
</style>
</head>
<body>
<h1 id="h1" style="color: yellow">Welcome</h1>
<script>
var h1 = document.getElementById("h1");
//修改:
//想修改字体颜色为白色
h1.style.color = "#fff";
//想修改背景样色为绿色
h1.style.backgroundColor = "green";
</script>
</body>
</html>运行结果：
(4). 获取样式
a. 不好的做法: 使用.style获取样式。因为.style仅仅代表元素的内联样式，不包含继承和层叠来的样式表中的样式。而实际项目中，很少使用内联样式。结果.style几乎拿不到所有的样式！
b. 好的做法: 今后只要获得css属性值，都要获得计算后的样式
1). 什么是计算后的样式: 网页加载完成后，最终应用到一个元素身上的所有样式的集合。即包含内联，又包含所有样式表中的样式！
2). 如何: 2步:
i. 先获得包含所有计算后的样式的对象:
var style=getComputedStyle(元素对象)
◼️ 扩展：getComputedStyle() 方法
getComputedStyle() 方法用于获取指定元素的 CSS 样式。
获取的样式是元素在浏览器中最终渲染效果的样式。
getComputedStyle()浏览器自带的全局函数。所以不用元素.调用：元素. getComputedStyle()，可直接使用getComputedStyle()
ii. 从style中获取对应的css属性值
style.css属性
3). 坑: getComputedStyle()虽然可以获得完整的样式集合，但是其中的样式，一个也不允许修改！都是只读！
4). 原因: 计算后的样式来源不确定！所以，一旦擅自修改，很可能牵一发而动全身！所以，计算后的样式都是只读的。要想修改只能用.style通过修改内联样式来覆盖样式表中的样式。
c. 示例: 获取元素的多个样式属性
0_getComputedStyle.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>
<style>
h1{
background-color:red
}
</style>
</head>
<body>
<h1 id="h1" style="color:yellow">Welcome</h1>
<script>
var h1=document.getElementById("h1");
//获取:
//不好的做法:
// //想获取h1的字体颜色属性:
// console.log(h1.style.color);//内联
// //想获取h1的背景颜色属性:
// console.log(h1.style.backgroundColor);//样式表
// //想获得h1的字体大小:
// console.log(h1.style.fontSize);//默认样式表
//好的做法:
var style=getComputedStyle(h1);
console.log(style);
//想获取h1的字体颜色属性:
console.log(style.color);
//想获取h1的背景颜色属性:
console.log(style.backgroundColor);
//想获得h1的字体大小:
console.log(style.fontSize);//32px
//想把h1的字体大小改为64px
style.fontSize="64px";//报错: Failed to set the 'font-size' property on 'CSSStyleDeclaration': These styles are computed, and therefore the 'font-size' property is read-only.
//不能修改计算后的属性中的font-size属性。因为这些样式是计算后的，所以是只读的。
</script>
</body>
</html>运行结果：
(5). 问题:使用内联样式修改多个css属性，会很繁琐
实际开发中修改一个元素的样式，可能同时修改多个css属性。如果用.style一个属性一个属性 的修改，代码会很繁琐。
(6). 解决: 通过修改class，批量修改一个元素的多个css属性。——划算
a. 先在css中定义好不同场景下的样式类预案
b. 再在js中只通过`元素.className="样式类名"`一句话就可批量更换元素的多个css属性值。 
(7). 示例: 带样式的表单验证
0_valiWithCss_0.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>实现带样式的表单验证</title>
<style>
table {
width: 700px;
}
/*父元素下的第1个，第n个，最后一个td子元素*/
td:first-child {
width: 60px;
}
/*IE不支持nth-child*/
td:nth-child(2) {
width: 200px;
}
/*IE*/
td:first-child + td {
width: 200px;
}
td span {
color: red;
}
/* 页面初始，验证消息不显示 */
.vali_info {
display: none;
}
/*当文本框获得焦点时穿上*/
/* .txt_focus {
border-top: 2px solid black;
border-left: 2px solid black;
} */
.vali_success,
.vali_fail {
background-repeat: no-repeat;
background-position: left center;
display: block;
}
/*如果验证文本框中的内容通过，则修改文本框旁边的div的class为vali_success，文本框旁边的div就变成了验证通过的样式！*/
.vali_success {
background-image: url("images/ok.png");
padding-left: 20px;
width: 0px;
height: 20px;
overflow: hidden;
}
/*当验证文本框的内容没通过，则修改文本框旁边的div的class为vali_fail，就能让文本框旁边的div变成验证失败的样子*/
.vali_fail {
background-image: url("images/err.png");
border: 1px solid red;
background-color: #ddd;
color: Red;
padding-left: 30px;
}
</style>
</head>
<body>
<form id="form1">
<h2>增加管理员</h2>
<table>
<tr>
<td>姓名：</td>
<td>
<input name="username" />
<span>*</span>
</td>
<td>
<div class="vali_info">10个字符以内的字母、数字或下划线的组合</div>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd" />
<span>*</span>
</td>
<td>
<div class="vali_info">6位数字</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="保存" />
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中: 姓名、密码文本框失去焦点时触发验证
//用name属性分别找到两个文本框
var inputName=document.getElementsByName("username")[0];//复习查看DOM如何查找元素
var inputPwd=document.getElementsByName("pwd")[0];//复习查看DOM如何查找元素
//2. 绑定事件处理函数
//为两个文本框绑定失去焦点函数
//当姓名文本框失去焦点时，自动执行
inputName.onblur = function () {
//3. 查找要修改的元素
//本例中: 要修改当前文本框的爹的下一个兄弟的第一个孩子
var div = this.parentElement.nextElementSibling.children[0];
//4. 修改元素
//先定义验证姓名的正则表达式
var reg = /^\w{1,10}$/;
//如果用正则表达式验证当前姓名文本框的内容通过
if (reg.test(this.value) == true) {
//就修改div的class为验证通过的样式类名
div.className = "vali_success";
} else {
//否则如果验证不通过
//就修改div的class为验证不通过的样式类名
div.className = "vali_fail";
}
};
//当密码文本框失去焦点时，自动执行
inputPwd.onblur = function () {
//3. 查找要修改的元素
//本例中: 要修改当前文本框的爹的下一个兄弟的第一个孩
var Pdiv = this.parentElement.nextElementSibling.children[0];
//4. 修改元素
//先定义验证密码的正则表达式
var reg = /^\d{6}$/;
//如果用正则表达式验证当前密码文本框的内容通过
if (reg.test(this.value) == true) {
//就修改Pdiv的class为验证通过的样式类名
Pdiv.className = "vali_success";
} else {
//否则如果验证不通过
//就修改div的class为验证不通过的样式类名
Pdiv.className = "vali_fail";
}
};
</script>
</body>
</html>
运行结果：
0_valiWithCSS_1.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>实现带样式的表单验证</title>
<link rel="Stylesheet" href="css/5.css" />
</head>
<body>
<form id="form1">
<h2>增加管理员</h2>
<table>
<tr>
<td>姓名：</td>
<td>
<input name="username"/>
<span>*</span>
</td>
<td>
<div class="vali_info">
10个字符以内的字母、数字或下划线的组合
</div>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd"/>
<span>*</span>
</td>
<td>
<div class="vali_info">6位数字</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="保存"/>
<input type="reset" value="重填"/>
</td>
</tr>
</table>
</form>
<script>
//DOM 4步:
//1. 查找触发事件的元素
//2. 绑定事件处理函数
//3. 查找要修改的元素
//4. 修改元素
//1. 查找触发事件的元素
//用name属性分别找到两个文本框
var txtName=
document.getElementsByName(
"username"
)[0];//即使找到的是一个元素，也是套在一个集合中返回的。只有用[0]才能掏出抱在集合内的元素对象
var txtPwd=
document.getElementsByName(
"pwd"
)[0];
//2. 绑定事件处理函数
//先绑定获得焦点事件
txtName.onfocus=
txtPwd.onfocus=function(){
//3. 查找要修改的元素
//先获得当前文本框
var txt=this;
//找到当前文本框的爹的下一个兄弟的第一个孩子div
var div=txt.parentNode //当前td
.nextElementSibling //下一个td
.children[0];//div
//4. 修改元素
//脱掉旁边div的隐身斗篷
div.className="";
}
//a=b=3;
//2. 绑定事件处理函数:
//为两个文本框绑定失去焦点函数
//当失去焦点
txtName.onblur=function(){
//定义姓名验证的正则表达式:
var reg=/^\w{1,10}$/;
//调用封装好的vali函数
vali(this,reg);
//vali中的this->window 是错的
//onblur中的this是.前的txtName 是对的
//所以在调用vali时，将onblur中正确的this，传入函数，交给形参txt
}
//考虑1个问题: 函数中缺什么是自己没有的！缺什么，就要定义什么形参，请外部将来传入！
function vali(txt,reg){
//用reg验证文本框的内容
var bool=reg.test(txt.value);
//先查找当前文本框旁边的div
var div=txt.parentNode //当前td
.nextElementSibling //下一个td
.children[0];//div
//如果验证通过
if(bool){
//就修改旁边div的className为vali_success
div.className="vali_success";
}else{//否则(如果验证没通过)
//就修改旁边div的className为vali_fail
div.className="vali_fail";
}
}
txtPwd.onblur=function(){
var reg=/^\d{6}$/;
vali(this,reg);
}
</script>
</body>
</html>运行结果：
🔷 0_valiWithCSS_0.html 和 0_valiWithCSS_1.html的区别在于
0_valiWithCSS_1.html 相比 0_valiWithCSS_0.html：
◼️ 多出的功能：定义了文本框获取焦点事件时，输入内容格式的提示文本
◼️ 封装函数：封装了失去焦点时，验证当前文本框对象的功能函数
其实，对于以上示例，我们还可以进一步做一些适当的功能拓展：以0_valiWithCSS_1.html为例：
当文本框获取焦点事件时，我们也可以对当前文本框自定义获得焦点时的样式类以及提示文本做修改，以区别于失去焦点时的样式类和提示的文本。目前获得和失去焦点时的提示文本是相同的。
完整代码如下：
0_valiWithCSS_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>实现带样式的表单验证</title>
<link rel="Stylesheet" href="css/5.css" />
<style>
table {
width: 700px;
}
/*父元素下的第1个，第n个，最后一个td子元素*/
td:first-child {
width: 60px;
}
/*IE不支持nth-child*/
td:nth-child(2) {
width: 200px;
}
/*IE*/
td:first-child + td {
width: 200px;
}
/*IE不支持--可以靠总宽度来调节
td:last-child{width:340px}*/
td span {
color: red;
}
.vali_info {
/* 页面初始，验证消息不显示 */
display: none;
}
.txt_focus {
/*当文本框获得焦点时穿上*/
border-top: 2px solid black;
border-left: 2px solid black;
}
/*当文本框失去焦点时脱下*/
.vali_success,
.vali_fail {
background-repeat: no-repeat;
background-position: left center;
display: block;
}
/* 验证消息：验证通过时的样式 */
.vali_success {
background-image: url("../images/ok.png");
padding-left: 20px;
width: 0px;
height: 20px;
overflow: hidden;
}
/* 验证消息：验证失败时的样式 */
.vali_fail {
background-image: url("../images/err.png");
border: 1px solid red;
background-color: #ddd;
color: Red;
padding-left: 30px;
}
</style>
</head>
<body>
<form id="form1">
<h2>增加管理员</h2>
<table>
<tr>
<td>账户：</td>
<td>
<input name="username" />
<span>*</span>
</td>
<td>
<div class="vali_info">10个字符以内的字母、数字或下划线的组合</div>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd" />
<span>*</span>
</td>
<td>
<div class="vali_info">6位数字</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="保存" />
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
<script>
//DOM 4步:
//1. 查找触发事件的元素
//2. 绑定事件处理函数
//3. 查找要修改的元素
//4. 修改元素
//1. 查找触发事件的元素
//用name属性分别找到两个文本框
var txtName = document.getElementsByName("username")[0]; //即使找到的是一个元素，也是套在一个集合中返回的。只有用[0]才能掏出抱在集合内的元素对象
var txtPwd = document.getElementsByName("pwd")[0];
//2. 绑定事件处理函数
//先绑定获得焦点事件的元素
txtName.onfocus = txtPwd.onfocus = function () {
//3. 查找要修改的元素
//先获得当前文本框
var txt = this;
//找到当前文本框的爹的下一个兄弟的第一个孩子div
var div = txt.parentNode.nextElementSibling.children[0]; //当前td //下一个td //div
//4. 修改元素
//脱掉旁边div的隐身斗篷:去掉div的类名，也就没有了.vali_info
div.className = "";
// 当然也可以自定义获得焦点时的样式类
// div.className = "txt_focus";
// 当然你也可以自定义获得焦点时的提示文本以区别于失去焦点时提示的文本。目前获得和失去焦点时的提示文本是相同的
// 判断哪个表单元素获得焦点
if (this == txtName) {
//如果当前获得焦点的是当前的txtName文本框对象
div.textContent = "请输入您的管理员用户名"; // 就找到当前文本框的爹的下一个兄弟的第一个孩子div，并获取div的纯文本内容
} else {
//否则，如果获得焦点的是当前的txtPwd文本框对象
div.textContent = "请输入您的管理员密码"; // 就找到当前文本框的爹的下一个兄弟的第一个孩子div，并获取div的纯文本内容
}
};
//给获得焦点事件的元素绑定事件处理函数。就如同同时声明2个变量的用法一样：a=b=3;
//2. 绑定事件处理函数:
//为两个文本框绑定失去焦点函数
//当失去焦点
txtName.onblur = function () {
// 失去焦点时，获取当前账户文本框输入内容格式的提示文本---div的内容
var div = this.parentNode.nextElementSibling.children[0];
div.textContent = "10个字符以内的字母、数字或下划线的组合";
//定义姓名验证的正则表达式:
var reg = /^\w{1,10}$/;
//调用封装好的vali函数
vali(this, reg);
//vali中的this->window 是错的
//onblur中的this是.前的txtName 是对的
//所以在调用vali时，将onblur中正确的this，传入函数，交给形参txt
};
//考虑1个问题: 函数中缺什么是自己没有的！缺什么，就要定义什么形参，请外部将来传入！
function vali(txt, reg) {
//用reg验证文本框的内容
var bool = reg.test(txt.value);
//先查找当前文本框旁边的div
var div = txt.parentNode.nextElementSibling.children[0]; //当前td //下一个td //div
//如果验证通过
if (bool) {
//就修改旁边div的className为vali_success
div.className = "vali_success";
} else {
//否则(如果验证没通过)
//就修改旁边div的className为vali_fail
div.className = "vali_fail";
}
}
txtPwd.onblur = function () {
// 失去焦点时，获取当前密码文本框输入内容格式的提示文本---div的内容
var div = this.parentNode.nextElementSibling.children[0];
div.textContent = "6位数字";
var reg = /^\d{6}$/;
vali(this, reg);
};
</script>
</body>
</html>
运行结果：
🌱 综合示例：操作DOM元素的内容与样式
通过classListh属性以及add方法，给元素添加多个类选择器
元素.classListh.add(‘类名’)
通过remove方法，移除类选择器
元素.classListh.remove(‘类名’)
操作DOM的内容：
1.innerText属性，用于获取和操作DOM的文本内容
2.innerHTML属性，用于获取和操作DOM的HTML内容
操作DOM元素的样式：
1.通过style属性直接设置
2.通过className属性设置类选择器
3.可以通过classList属性添加多个类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<tit1e>操作D0M元素的内容和样式</tit1e>
<style>
div {
border: 1px solid #eee;
margin: 5px 0;
padding: 5px;
}
.class1 {
font-size: 30px;
color: ▣b1lue;
border-radius: 5px;
background-color: lightblue;
}
.size {
font-size: 30px;
}
.color {
color: chartreuse;
}
.radius {
border-radius: 5px;
}
.bgcolor {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div id="c">我正在学习js</div>
<div id="d">我正在学习html</div>
<button id="size">添加大小</button>
<button id="color">添加颜色</button>
<button id="radius">添加圆角</button>
<button id="bgcolor">添加背景</button>
<br /><br />
<button id="size2">移除大小</button>
<button id="color2">移除领色</button>
<button id="radius2">移除圆角</button>
<button id="bgcolor2">移除背景</button>
<div id="e">我正在学习JavaScript</div>
<script>
//innerText属性设置内容时，不能识别html标签，会将html标签以文本的形式呈现
document.querySelector(".a").innerText = "<h2>好好学习<h2>";
//innerHTML属性设置内容时，能够识别html标签
document.querySelector(".b").innerHTML = "<h5>好好学习，天天向上</h5>";
let c = document.querySelector("#c");
//通过style属性设置元素的样式
c.style.color = "purple";
//如果样式名称是多个单词的组合，需要使用小驼峰命名规苑
c.style.fontSize = "20px";
let d = document.querySelector("#d");
//通过className属性，给元素指定一个类选择器
d.className = "class1";
// 下面是添加样式：通过classListh属性以及add方法，给元素添加多个类选择器
//获取div#e元素
let e = document.querySelector("#e");
//通过classListh属性，给元素添加多个类选择器
//获取siz按钮并给按钮注册(绑定)一个点击事件
//字体大小按钮点击事件
document.querySelector("#size").onclick = function () {
//通过add方法，添加类选择器
e.classList.add("size");
};
//颜色按钮点击事件
document.querySelector("#color").onclick = function () {
e.classList.add("color");
};
//圆角按钮点击事件
document.querySelector("#radius").onclick = function () {
e.classList.add("radius");
};
//背景按钮点击事件
document.querySelector("#bgcolor").onclick = function () {
e.classList.add("bgcolor");
};
//下面是移除样式：通过remove方法，移除类选择器
document.querySelector("#size2").onclick = function () {
//通过remove方法，移除类选择器
e.classList.remove("size");
};
document.querySelector("#color2").onclick = function () {
e.classList.remove("color");
};
document.querySelector("#radius2").onclick = function () {
e.classList.remove("radius");
};
document.querySelector("#bgcolor2").onclick = function () {
e.classList.remove("bgcolor");
};
</script>
</body>
</html>🏝️ 扩展：HTML5中新增了操作元素类名的方式——classList
◼️ HTML DOM classList 属性
1. 定义和用法：
classList 属性返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
2. 语法：
element.classList
3. classList有5个属性①add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
②contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
③remove(value)：从列表中删除给定的字符串。
④toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它
⑤item(index)：返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .mystyle { width: 300px; height: 50px; background-color: coral; color: white; font-size: 25px; } </style> </head> <body> <p>点击按钮为 DIV 元素添加 "mystyle" 类。</p> <button onclick="myFunction()">点我</button> <p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 classList 属性。</p> <div id="myDIV"> 我是一个 DIV 元素。 </div> <script> function myFunction() { document.getElementById("myDIV").classList.add("mystyle"); } </script> </body> </html>运行结果：
◼️ 如果不使用HTML DOM classList 属性以及jqeury提供的removeClass()这个api，要如何删除一个元素的类名呢，答案就是：自己封装，比如，我们可以这样封装一下代码：function removeClass(elm,removeClassName) { var classNames = elm.className.split(/\s+/);//首先获取类名字符串并拆分成数组 var pos = -1, i, len; for (i = 0, len = classNames.length; i < len; i++){//找到要删的类名 if(classNames[i] == removeClassName) { pos = i; break; } } if(pos == -1){ throw Error("没有这个类名"); } classNames.splice(i,1);//删除类名 elm.className = classNames.join(" ");//把剩下的类名拼成字符串重新设置参考：HTML DOM classList 属性
⬛总结: DOM 5件事: 增删改查+事件绑定:
1. 查找元素: 4种查找方式
2. 修改元素: 3种东西可修改
(1). 修改内容: 3种内容可修改:
a. 获取或修改元素的HTML内容:
1). 元素.innerHTML
2). 获取时: 返回原始HTML内容
3). 修改时: 先将新内容交给浏览器编译，再显示给人看
b. 获取或修改元素的纯文本内容:
1). 元素.textContent
2). 获取时: 返回去掉内嵌标签，将特殊符号翻译为正文后的纯文本
3). 修改时: 不会将新内容交给浏览器编译，而是原样显示给人看
c. 获取或修改表单元素的值:
表单元素.value
(2). 修改属性: 3种
a. 字符串类型的HTML标准属性: 2种:
1). 旧核心DOM: 4个函数
i. 元素.getAttribute("属性名");
ii. 元素.setAttribute("属性名", "属性值")
iii. var bool=元素.hasAttribute("属性名")
iv. 元素.removeAttribute("属性名")
优点: 万能, 缺点: 繁琐
2). 新HTML DOM:
i. 元素.属性名
ii. 元素.属性名="属性值"
iii. 元素.属性名!==""
iv. 元素.属性名=""
优点: 简单, 缺点: 不万能
b. bool类型的HTML标准属性：
1). 不能用旧核心DOM4个函数修改
2). 只能用HTML DOM的"元素.属性名"方式获取或修改，且值为bool类型
c. 自定义扩展属性:
1) HTML中: <元素 data-自定义属性名="属性值">
2). js中: 2种: （不能用.访问）
i. 核心DOM:
var 属性值=元素.getAttribute("data-自定义属性名")
元素.setAttribute("data-自定义属性名","属性值")
ii. HTML5标准: 元素.dataset.自定义属性名
(3). 修改样式:
a. 修改元素的内联样式:
元素.style.css属性="属性值"
b. 获取元素的完整样式:
var style=getComputedStyle(元素对象);
style.css属性
计算后的样式都是只读的
c. 批量修改元素的样式时，都用class:
元素.className="class名"
【后文传送门】👉 DOM操作之如何添加、删除、替换元素_04
如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！
扫一扫
5478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
