JavaScript設定表格字體大小

表格是網頁中經常使用的元件，可以使用 HTML 和 CSS 來設定表格的樣式。但是，有時候我們需要在表格中設定字體大小，這就需要使用 JavaScript 來完成了。下面我將介紹如何使用 JavaScript 設定表格字體大小。

首先，在HTML 檔案中建立一個表格，並給表格一個ID，如下所示：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
    <td>女</td>
  </tr>
</table>

然後，在JavaScript 檔案中取得該表格元素，並設定其字體大小，如下所示：

var table = document.getElementById("myTable");
table.style.fontSize = "16px";

在上述程式碼中，我們首先透過ID 取得了表格元素，然後使用style 屬性設定其字體大小為16 個像素。這裡要注意的是，CSS 中的單位在 JavaScript 中需要用字串形式指定。

運行程式碼後，我們可以看到表格中所有字體大小都設定為 16 像素。

上述程式碼只是基本的表格字體大小設置，如果我們需要更細緻的控制，可以使用getElementsByTagName 方法來取得表格中的每個儲存格，並對每個儲存格進行字體大小設置，如下所示：

var table = document.getElementById("myTable");
var cells = table.getElementsByTagName("td");

for (var i = 0; i < cells.length; i++) {
  cells[i].style.fontSize = "16px";
}

在上述程式碼中，我們透過getElementsByTagName 方法取得表格中的所有儲存格，然後使用循環遍歷每個單元格，並設定其字體大小為16 像素。

除了設定單一表格的字體大小，我們還可以透過 JavaScript 批次設定多個表格的字體大小，只需遍歷每個表格元素並設定其樣式即可。

綜上所述，使用 JavaScript 設定表格字體大小是很簡單的，只需取得表格元素並設定其樣式即可。透過一些循環操作，我們還可以批量設定多個表格的字體大小，實現更靈活的控制。

以上是JavaScript設定表格字體大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！