[TOC] ### 1. innerHTML 改變元素的內容 ~~~ test.onclick = function(){ this.innerHTML = "<p>change</p>"; } ~~~ ### 2. textContent ：原樣輸出 ~~~ test.onclick = function(){ this.textContent = "<p>change</p>"; } ~~~ ### 3. ele.style.cssAttr ~~~ test.onclick = function () { // this.style.backgroundColor = "#0EA432" } ~~~ ### 4. ele.className ~~~ test.onclick = function () { // this.className = "test" } ~~~ ### 5. ele.style.cssText （重要） ~~~ test.onclick = function () { this.style.cssText = "color:red;font-size:30px;background-color:yellow" } ~~~ ### 6. ele.classList 獲取的是一個class的集合 （重要） ~~~ test.onclick = function () { this.style.cssText = "color:red;font-size:30px;background-color:yellow" } ~~~ ### 7. ele.classList.add() （重要） ~~~ test.onclick = function () { this.classList.add("fs"); } ~~~ ### 8. ele.classList.remove() （重要） ~~~ 1. test.onclick = function () { this.classList.remove("current") } var test = document.getElementById("test"); test.onclick = function(){ this.remove(); } ~~~ ### 9. ele.classList.toggle()-->在add和remove之間切換 （重要） ~~~ test.onclick = function () { this.classList.toggle("current"); } ~~~ ### 10. ele.classList.contains()-->是否包含某個class,結果返回boolean值 ~~~ test.onclick = function () { console.log(this.classList.contains("current")); } ~~~ ### 11. ele.setAttribute(attr,value) 設置樣式 （重要） ~~~ var test = document.getElementById("test"); test.setAttribute("style","color:red"); test.setAttribute("class","current"); ~~~ ### 12.隔行變色 ~~~ 1. /* :nth-child() -->下標從1開始 even -->偶數項 odd-->奇數項 */ /* li:nth-child(odd){ color:red; } */ 2. <script> // 讓偶數項邊紅色,奇數項綠色 var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { if (i % 2 == 0) { lis[i].style.color = "red"; } else { lis[i].style.color = "green"; } } </script> ~~~