[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> ~~~