【DOM】DOM操作之如何修改元素的样式_03
目录
一. 修改: 3种
1. 元素内容: 3种
2. 元素属性: 3种
3. 元素样式:
(1). 修改内联样式
(2). 修改样式表中的样式
(3). 示例: 修改元素的内联样式和样式表中的样式
(4). 获取样式
(5). 问题:使用内联样式修改多个css属性，会很繁琐
(6). 解决: 通过修改class，批量修改一个元素的多个css属性。——划算
(7). 示例: 带样式的表单验证
⬛总结: DOM 5件事: 增删改查+事件绑定:
【前文回顾】👉 DOM操作之如何修改元素的内容与属性_02
一. 修改: 3种
1. 元素内容: 3种
2. 元素属性: 3种
3. 元素样式:
(1). 修改内联样式
a. 元素.style.css属性名="属性值"
b. 相当于: 修改HTML中的style属性内的某个css属性的值
c. 问题: 有些css属性名是带-的，但是js中除了减法计算之外，不允许随便写-。会混淆
d. 解决: DOM标准规定，所有带-的css属性名，一律去横线变驼峰:
比如: z-index -> zIndex
font-size -> fontSize
(2). 修改样式表中的样式
a. 强烈不建议直接修改样式表中的样式，因为样式表中的样式是共用的，一旦随意修改，会牵一发而动全身！
b. 如果针对一个元素，确实想改变样式表中继承或层叠来的样式，应该也修改内联样式:
1). 因为内联样式优先级最高！可以覆盖样式表中的样式
2). 因为内联样式只影响当前一个元素，不会影响其他元素。
(3). 示例: 修改元素的内联样式和样式表中的样式
0_style.html
Document h1 { background-color: red; } Welcome
var h1 = document.getElementById("h1"); //修改: //想修改字体颜色为白色 h1.style.color = "#fff"; //想修改背景样色为绿色 h1.style.backgroundColor = "green"; 运行结果：
(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
Document h1{ background-color:red } Welcome
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属性。因为这些样式是计算后的，所以是只读的。 运行结果：
(5). 问题:使用内联样式修改多个css属性，会很繁琐
实际开发中修改一个元素的样式，可能同时修改多个css属性。如果用.style一个属性一个属性 的修改，代码会很繁琐。
(6). 解决: 通过修改class，批量修改一个元素的多个css属性。——划算
a. 先在css中定义好不同场景下的样式类预案
b. 再在js中只通过`元素.className="样式类名"`一句话就可批量更换元素的多个css属性值。 
(7). 示例: 带样式的表单验证
0_valiWithCss.html
实现带样式的表单验证 table { width: 700px; } td:first-child { width: 60px; } 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; } 增加管理员
姓名： * 10个字符以内的字母、数字或下划线的组合 密码： * 6位数字
//DOM 4步 //1. 查找触发事件的元素 //本例中: 姓名文本框失去焦点时触发验证 var inputName = document.getElementsByName("username")[0]; //复习第一天查找元素 //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"; } }; 运行结果：
⬛总结: 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中:
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名"
如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！
