JavaScript (JS) 是一種高級編程語言,可以通過使用它來創(chuàng)建動態(tài)網頁以及在網站上執(zhí)行多種功能。在本文中,我們將介紹如何使用 JS 來創(chuàng)建表格的 CSS 樣式。
// HTML 代碼 <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>Male</td> </tr> <tr> <td>Jane</td> <td>30</td> <td>Female</td> </tr> </tbody> </table> // CSS 代碼 var table = document.getElementsByTagName('table')[0]; table.setAttribute('class', 'table'); var tr = table.getElementsByTagName('tr'); for (var i = 0; i < tr.length; i++) { if (i % 2 == 0) { tr[i].setAttribute('class', 'odd'); } else { tr[i].setAttribute('class', 'even'); } } // 添加 CSS 樣式 .table { border-collapse: collapse; margin: 10px auto; font-size: 16px; } .odd { background-color: #f2f2f2; } .even { background-color: #fff; } th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
該 JS 代碼將添加一個 class 值為 "table" 的類,它包含border-collapse: collapse;
、margin: 10px auto;
和font-size: 16px;
樣式。此外,JS 還會在奇偶行之間添加不同的背景顏色。
上述 CSS 樣式設置將使表格的邊框、內邊距和文本居左對齊。border: 1px solid #ccc;
樣式用于設置單元格的邊框。帶有類 "odd" 和 "even" 的行將交替使用不同的背景顏色。
總之,使用 JavaScript 來添加 CSS 樣式可以輕松地為表格創(chuàng)建清晰、易于閱讀的格式。希望這篇文章對你有所幫助!
上一篇js切換css怎么改