Maison > Article > interface Web > Comment définir la largeur de td en javascript

Comment définir la largeur de td en javascript

PHPzoriginal: 2023-04-24 15:49:251458parcourir

JavaScript est un langage de programmation largement utilisé pour développer des sites Web et des applications. L'une des questions courantes en matière de conception Web est de savoir comment définir la largeur d'une cellule (td) dans un tableau. Cet article explique comment définir la largeur de td à l'aide de JavaScript.

Tout d'abord, examinons le code HTML montrant une mise en page Web de base avec un tableau :

<!DOCTYPE html>
<html>
<head>
    <title>设置td宽度</title>
</head>
<body>
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
    </table>
</body>
</html>

Dans cette mise en page Web de base, nous avons un tableau avec deux lignes et trois colonnes. Nous voulons maintenant définir la largeur de l'une des cellules. Nous pouvons y parvenir en suivant les étapes suivantes :

La première étape consiste à définir un identifiant pour chaque élément td. Par exemple, si nous voulons définir la largeur de la cellule 2, nous pouvons modifier le code html sous la forme suivante :

<!DOCTYPE html>
<html>
<head>
    <title>设置td宽度</title>
</head>
<body>
    <table>
        <tr>
            <td id="cell1">单元格1</td>
            <td id="cell2">单元格2</td>
            <td id="cell3">单元格3</td>
        </tr>
        <tr>
            <td id="cell4">单元格4</td>
            <td id="cell5">单元格5</td>
            <td id="cell6">单元格6</td>
        </tr>
    </table>
</body>
</html>

La deuxième étape consiste à définir la largeur de la cellule à l'aide du code JavaScript. Nous pouvons obtenir une référence à la cellule 2 en utilisant la fonction getElementById() en JavaScript et définir sa largeur à l'aide d'une propriété CSS. Par exemple, le code JS suivant définit la largeur de la cellule 2 à 200 pixels :

var cell2 = document.getElementById("cell2");   // 获取单元格2的引用
cell2.style.width = "200px";                     // 设置单元格2的宽度为200像素

Troisième étape, intégrez le code ci-dessus dans HTML. Ajoutez le code suivant dans la balise head :

<!DOCTYPE html>
<html>
<head>
    <title>设置td宽度</title>
    <script type="text/javascript">
        window.onload = function() {
            var cell2 = document.getElementById("cell2");
            cell2.style.width = "200px";
        };
    </script>
</head>
<body>
    <table>
        <tr>
            <td id="cell1">单元格1</td>
            <td id="cell2">单元格2</td>
            <td id="cell3">单元格3</td>
        </tr>
        <tr>
            <td id="cell4">单元格4</td>
            <td id="cell5">单元格5</td>
            <td id="cell6">单元格6</td>
        </tr>
    </table>
</body>
</html>

Le code ci-dessus définit la largeur de la cellule 2 à 200 pixels. Maintenant, lorsque nous ouvrirons la page, nous verrons que la largeur de la cellule 2 a été fixée à 200 pixels.

Avec les étapes ci-dessus, nous pouvons utiliser JavaScript pour définir la largeur de la cellule (td) dans le tableau. En obtenant une référence à une cellule et en utilisant les propriétés CSS pour définir la largeur de la cellule, nous pouvons redimensionner efficacement la cellule pour l'adapter aux besoins de conception.

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!

Déclaration：

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

Article précédent：Comment dessiner un diagramme d'analyse de fonction JavascriptArticle suivant：Comment dessiner un diagramme d'analyse de fonction Javascript

Articles Liés

Voir plus