JavaScript définit la taille de la police du tableau

WBOY
Libérer: 2023-05-15 22:02:36
original
863 Les gens l'ont consulté

Les tableaux sont des composants couramment utilisés dans les pages Web. HTML et CSS peuvent être utilisés pour styliser les tableaux. Cependant, nous devons parfois définir la taille de la police dans le tableau, ce qui doit être fait à l'aide de JavaScript. Ci-dessous, je vais vous montrer comment définir la taille de la police du tableau à l'aide de JavaScript.

Tout d'abord, créez un tableau dans le fichier HTML et attribuez-lui un identifiant, comme indiqué ci-dessous :

<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>
Copier après la connexion

Ensuite, récupérez l'élément de table dans le fichier JavaScript et définissez son la taille de la police est la suivante :

var table = document.getElementById("myTable");
table.style.fontSize = "16px";
Copier après la connexion

Dans le code ci-dessus, nous obtenons d'abord l'élément de table via l'ID, puis utilisons l'attribut style pour définir sa taille de police sur 16 pixels. Il convient de noter ici que les unités CSS doivent être spécifiées sous forme de chaîne en JavaScript. 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";
}
Copier après la connexion

在上述代码中,我们通过 getElementsByTagName

Après avoir exécuté le code, nous pouvons voir que toutes les tailles de police du tableau sont définies sur 16 pixels.

Le code ci-dessus n'est qu'un paramètre de base de taille de police de tableau. Si nous avons besoin d'un contrôle plus détaillé, nous pouvons utiliser la méthode getElementsByTagName pour obtenir chaque cellule du tableau et définir chacune d'elles. cellule du tableau. Définissez la taille de la police de la cellule comme suit :

rrreee

Dans le code ci-dessus, nous obtenons toutes les cellules du tableau via la méthode getElementsByTagName, et utilisez ensuite une boucle pour parcourir chaque cellule et définissez sa taille de police sur 16 pixels. #🎜🎜##🎜🎜#En plus de définir la taille de police d'un seul tableau, nous pouvons également définir la taille de police de plusieurs tableaux par lots via JavaScript, simplement en parcourant chaque élément du tableau et en définissant son style. #🎜🎜##🎜🎜#Pour résumer, définir la taille de la police du tableau à l'aide de JavaScript est très simple, il suffit de récupérer l'élément du tableau et de définir son style. Grâce à certaines opérations de boucle, nous pouvons également définir la taille de la police de plusieurs tableaux par lots pour obtenir un contrôle plus flexible. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal