JavaScript sets table font size

Tables are commonly used components in web pages. HTML and CSS can be used to style tables. However, sometimes we need to set the font size in the table, which needs to be done using JavaScript. Below I'll show you how to set the table font size using JavaScript.

First, create a table in the HTML file and give the table an ID, as shown below:

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

Then, get the table element in the JavaScript file and set its font size, As shown below:

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

In the above code, we first obtain the table element through the ID, and then use the style attribute to set its font size to 16 pixels. It should be noted here that units in CSS need to be specified in string form in JavaScript.

After running the code, we can see that all font sizes in the table are set to 16 pixels.

The above code is just the basic table font size setting. If we need more detailed control, we can use the getElementsByTagName method to get each cell in the table and perform operations on each cell. Font size setting, as shown below:

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

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

In the above code, we get all the cells in the table through the getElementsByTagName method, and then use a loop to traverse each cell and set its Font size is 16 pixels.

In addition to setting the font size of a single table, we can also set the font size of multiple tables in batches through JavaScript, just by traversing each table element and setting its style.

To sum up, setting the table font size using JavaScript is very simple, just get the table element and set its style. Through some loop operations, we can also set the font size of multiple tables in batches to achieve more flexible control.

The above is the detailed content of JavaScript sets table font size. For more information, please follow other related articles on the PHP Chinese website!