<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>DOM設置css樣式</title> <!-- p.style.fontSize=100px; 解讀： 設置元素p的樣式字體大小=100px; 樣式屬性不能有“-”符號，要寫出駝峰形式 切記，除了getElementById獲取到的元素，其他都要通過數組x[i]的索引來對其設置樣式，不論獲取到的有幾個 --> </head> <body> <h3 id="h">前端書籍</h3> <ul id="listWeb"> <li>html基礎</li> <li>CSS基礎</li> <li>JavaScript基礎</li> <li>Jquery框架</li> <li>bootStrap框架</li> </ul> <h3>JAVA書籍</h3> <ul id="listJava"> <li>JAVA語言基礎</li> <li>三大框架</li> <li>JAVA深入淺出</li> </ul> <script> var x=document.getElementById("h");//使用變量x獲取id=h的h3 x.style.color="blue";//id方法獲取的是唯一的，無需使用數組索引 var y=document.getElementsByTagName("h3");//使用變量y獲取h3元素 y[1].style.color="red";//數組索引第二個h3並設置樣式 var a=document.getElementById("listWeb").getElementsByTagName("li");//使用變量a獲取所有前端書籍 for (var i=0;i<=a.length;i++){//使用循環遍歷所有前端書籍 a[i].style.fontStyle="italic";//將所有前端書籍設置斜體 if (i==2){ a[i].style.color="green";//將第二個設置字體顏色為綠色 a[i].style.listStyle="none";//將第二個前面的黑點刪除 }else{ a[i].style.backgroundColor="grey";//將其他的設置背景顏色為灰色 } } </script> </body> </html>
DOM設置css樣式
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。