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