通过DOM对HTML文档的元素内容和CSS样式进行操作javascript,DOM,文档对象模型qq39155611的博客-

通过DOM对HTML文档的元素内容和CSS样式进行操作

通过前面的学习我们应该可以了解到，通过DOM我们可以操作HTMl文档中的任意的元素及属性，文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。

HTML代码：

 <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">             列表             <li class="item">列表01</li> <li>列表02</li> <li>列表03</li> <li>列表04</li> </ul> <!-- <img src="../../CSS/0421/car.gif" alt=""> --> <div class="box"></div> </div> 

CSS代码：

 /* .wrap{         color: yellow;     } */ .box{ width: 200px; height: 200px; background: url("../../CSS/0421/car.gif") no-repeat center/100% 100%; } 

1.有关HTML的操作

 // DOM中有关HTML的操作 var oWrap=document.getElementsByClassName("wrap")[0]; var oText=document.getElementById("text"); var oList=document.getElementsByClassName("list")[0]; var oImg=document.querySelector("img"); var oItem=document.getElementsByClassName("item")[0]; // innerHTML   获取/设置元素的内容   包含标签     console.log(oWrap.innerHTML); // oWrap.innerHTML="<h2 style='color:yellow'>这是一个标题</h2>"; // outerHTML     console.log(oWrap.outerHTML); // innerText   获取/设置元素的文本内容     console.log(oWrap.innerText);     console.log(oItem.innerText); // oWrap.innerText="<h2 style='color:yellow'>这是一个标题</h2>"; // outerText     console.log(oItem.outerText); 

2.通过DOM操作CSS样式

 var oWrap=document.getElementsByClassName("wrap")[0]; var oText=document.getElementById("text"); var oList=document.getElementsByClassName("list")[0]; var oImg=document.querySelector(".box"); var oItem=document.getElementsByClassName("item")[0]; var oBtn=document.getElementById("btn"); // 获取css样式 // 语法：element.style    只可以获取行内样式     console.log(oWrap.style);     console.log(oWrap.getAttribute("style")); // 设置css样式： // 语法：element.style.样式属性名="样式属性值"     oList.style.color="blue"; // css属性中 有 - 的  改为驼峰peiw // oList.style.backgroundColor="pink";     oList.setAttribute("style","background-color:hotpink");     oBtn.onclick=function(){ // oImg.src="../../CSS/0421/car.jpg";         oImg.style.backgroundImage="url(../../CSS/0421/car.jpg)"; } 

注意： inndeHTML和outerHHML的区别很好区分，但是innerText和outerText的区别却不好区分，其实innerText和outerText的主要区别在于设置属性时的区别。

• innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
• outerHTML 设置或获取对象及其内容的 HTML 形式。
• innerText 设置或获取位于对象起始和结束标签内的文本。
• outerText 设置(包括标签)或获取(不包括标签)对象的文本。

视频讲解链接：
https://www.bilibili.com/video/BV1fg4y1B7Uz/