[TOC] # 1.CSSStyleDeclaration 接口 ~~~ //语法 element.style ~~~ ## 1.1`cssText` ~~~ //语法 element.style.cssText=attr ~~~ ~~~ <div id="test">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ this.style.cssText="border:1px solid #333;color:red"; } </script> ~~~ ## 1.2`length` ~~~ <div id="test" style="color:red;font-size: 18px">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ alert(this.style.length) } </script> ~~~ ## 1.3`getPropertyValue()` ~~~ <div id="test" style="color:red;font-size: 18px">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ alert(this.style.getPropertyValue("color")) console.log(this.style.color) } </script> ~~~ ## 1.4item() 方法接受一个整数值作为参数，返回该位置的 CSS 属性名 ~~~ <div id="test" style="color:red;font-size: 18px">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ alert(this.style.item(0)) //color } </script> ~~~ ## 1.5removeProperty() 接受一个属性名作为参数，在 CSS 规则里面移除这个属性 ~~~ <div id="test" style="color:red;font-size: 18px">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ this.style.removeProperty("color") } </script> ~~~ ## 1.6setProperty() ~~~ //语法 setProperty(attr,value) ~~~ # 2.element节点 ## 2.1className,classList ~~~ classList对象有下列方法。 add()：增加一个 class。 remove()：移除一个 class。 contains()：检查当前元素是否包含某个 class。 toggle()：将某个 class 移入或移出当前元素。 item()：返回指定索引位置的 class。 ~~~ ~~~ <div class="test"></div> <script> var lis = document.getElementsByClassName("test")[0]; lis.onclick = function(){ alert(this.classList.contains("test")) } </script> ~~~ ## 2.2 Element.clientHeight，Element.clientWidth https://www.cnblogs.com/kongxianghai/p/4192032.html 除了元素本身的width,height，它还包括padding部分，但是不包括border、margin Tip:如果有垂直滚动条，还要减去垂直滚动条的宽度 [返回可视区域的width,height]() ~~~ // 视口高度 //documentElement相当于html document.documentElement.clientHeight // 网页总高度 document.body.clientHeight ~~~ ## 2.3 scrollWidth,scrollHeight ~~~ textarea{ height:100px; } <textarea id="test" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, vitae. Modi libero blanditiis quae iusto quo! Ad quos animi cumque, iure possimus esse blanditiis dolor a. Architecto dolores rem nulla! </textarea> <script> var test = document.getElementById("test"); console.log(test.clientHeight) console.log(test.scrollHeight) </script> ~~~ ~~~ div{ overflow-x:scroll; } <div id="test" > <p style="width:2000px;">hello world</p> </div> <script> var test = document.getElementById("test"); console.log(test.scrollWidth) console.log(test.scrollHeight) </script> ~~~ ## 2.4 clientLeft,clientTop [返回元素顶部边框的height,和left边框的width]() ## 2.5Element.scrollLeft，Element.scrollTop 如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。 ~~~ document.documentElement.scrollLeft document.documentElement.scrollTop ~~~ 这两个属性都可读写，设置该属性的值，会导致浏览器将当前元素自动滚动到相应的位置。 ~~~ body { height: 2000px; } #btn { position: fixed; width: 40px; height: 70px; right: 0; bottom: 20px; } ~~~ ~~~ <button id="btn">btn</button> <script> var btn = document.getElementById("btn") btn.onclick = function () { var height = document.documentElement.scrollTop; if(height>0){ document.documentElement.scrollTop=0; } } </script> ~~~ ## 2.6Element.offsetParent 返回给了定位的父元素,如果父元素没有定位,则返回body ## 2.7Element.offsetHeight，Element.offsetWidth 包含边框,和滚动条的width ~~~ <style> textarea{ width:100px; height:200px; } </style> ~~~ ~~~ <textarea id="test"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur neque soluta atque vero non iure inventore necessitatibus, laborum, quis nesciunt, ducimus commodi? Architecto, recusandae. Fugit natus ipsam accusamus mollitia id. </textarea> <script> var test = document.getElementById("test"); var ow = test.offsetWidth; console.log(ow); </script> ~~~ ## 2.8Element.offsetLeft，Element.offsetTop 子元素相对于[定位的父元素]()的偏移量 ## 2.9Element.remove() ~~~ var el = document.getElementById('mydiv'); el.remove(); ~~~ # 3.parentNodes ## 3.1ParentNode.children children属性返回一个HTMLCollection实例，成员是当前节点的所有元素子节点 ## 3.2ParentNode.append()，ParentNode.prepend() - prepend()在父元素的第一位增加元素 - append()在父元素的最后一位增加元素 >Tip:可添加多个,元素和文本都可以 ~~~ <div id="parent"> </div> <script> var parent = document.getElementById("parent"); var p = document.createElement("p"); p.innerHTML="prepend"; console.log(p); parent.prepend(p); </script> ~~~ ~~~ var parent = document.getElementById("parent"); var p1 = document.createElement("p"); var p2 = document.createElement("p"); p1.innerHTML="prepend1"; p2.innerHTML = "prepend2"; parent.prepend(p1,p2); ~~~ # 4.ChildNode 接口 * * * * * ## 4.1before-在元素之前插入,可以传多个值 ~~~ <script> var child = document.getElementById("child"); child.before("before") </script> ~~~ ## 4.2after ~~~ <script> var child = document.getElementById("child"); child.after("after") </script> ~~~