[toc] ### 1. DOM修改元素內容 `innerHTML `：改變元素的內容，可改變html結構 `textContent` ：改變文本的內容，不改變html結構 ``` var test = document.getElementById("test"); test.onclick = function(){ this.innerHTML = "<p>change</p>"; // this.textContent = "<p>change</p>"; } ``` ### 2. DOM修改CSS樣式 1. ele.style.cssAttr = "" ``` test.style.color = "red"; ``` 2. ele.className() ``` test.className("none"); ``` 3. ele.style.cssText() ``` test.style.cssText = "color:red; font-weight: bold; font-size:30px" ``` 4. ele.classList ``` ele.classList.add("none"); ele.classList.remove("none"); ele.classList.toggle("none"); test.classList.contains("show") //判斷是否包含show，結果返回boolean ``` 5. ele.setAttribute(attr, value) ``` var test = document.getElementById("test"); test.setAttribute("style", "color: red"); test.setAttribute("class", "current"); ``` 6. ele.style.setProperty("color", "yellow"); ele.style.removeProperty("color", "red"); > #### 1. 獲取css樣式 1. 獲取樣式表的樣式： `getComputedStyle(element).cssAttr` 2. 獲取內聯樣式：`element.style.cssAttr` ``` <div id="test" style="background-color:red;"></div> <script> var test = document.getElementById("test"); // var bg = getComputedStyle(test).backgroundColor; var bg = test.style.backgroundColor; console.log(bg); //red </script> ``` > #### 2. demo-點擊顯示隱藏 ``` var test = document.getElementById("test"); var btn = document.getElementById("btn"); btn.onclick = function(){ if(test.classList.contains("show")){ test.classList.remove("show"); }else{ test.classList.add("show"); } //test.classList.toggle("show"); } ``` ### 3. 操作元素屬性 獲取：getAttribute("id") ``` var parent = document.getElementById("parent"); var attr = parent.getAttribute("id"); console.log(attr); ``` 移除：removeAttribute ### 4. 獲取元素的大小 #### 1. offset >offset屬性只讀，不能通過offset方法修改 offsetParent：獲取給了定位的父級元素，offset返回number型 offsetLeft：返回元素相對父元素水平偏移位置 offsetTop：返回元素相對父元素垂直偏移位置 offsetWidth：返回元素的寬度(content border padding) offsetHeight：返回元素的高度 #### 2. clientWidth ele.clientWidth：不包括border, margin #### 3. scrollWidth 滾動區域的width, height scrollWidth、scrollHeigth ### 5. 獲取元素距離頂部的高度 1. javascript ``` /*向外循環獲取offsetTop*/ function getTop(element){ var realTop = element.offsetTop; var parent = element.offsetParent; while(parent !== null) { realTop += parent.offsetTop; parent = parent.offsetParent; } return realTop; } var child = document.getElementById("child"); var top = getTop(child); console.log(top); ``` 2. jQuery offset().top方法