JavaScriptでtdの幅を設定する方法-フロントエンドQ&A-php.cn

JavaScriptでtdの幅を設定する方法

PHPz

リリース： 2023-04-24 16:53:04

オリジナル

1573 人が閲覧しました

JavaScript は、Web サイトやアプリケーションの開発に広く使用されているプログラミング言語です。 Web デザインでよくある質問の 1 つは、テーブル内のセルの幅 (td) を設定する方法です。この記事ではJavaScriptを使用してtdの幅を設定する方法を紹介します。

まず、表を含む基本的な Web ページレイアウトを示す HTML コードを見てみましょう。

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

ログイン後にコピー

この基本的な Web ページレイアウトには、2 行と 3 行からなる表があります。列。ここで、セルの 1 つの幅を設定したいと思います。これは、次の手順で実現できます。

最初の手順は、各 td 要素に ID を設定することです。たとえば、セル 2 の幅を設定する場合、HTML コードを次の形式に変更できます。

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

ログイン後にコピー

2 番目のステップは、JavaScript コードを使用してセルの幅を設定することです。 JavaScript の getElementById() 関数を使用してセル 2 への参照を取得し、CSS プロパティを使用してその幅を設定できます。たとえば、次の JS コードはセル 2 の幅を 200 ピクセルに設定します。

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

ログイン後にコピー

3 番目のステップは、上記のコードを HTML に埋め込むことです。次のコードを 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>

ログイン後にコピー

上記のコードは、セル 2 の幅を 200 ピクセルに設定します。ページを開くと、セル 2 の幅が 200 ピクセルに設定されていることがわかります。

上記の手順により、JavaScript を使用してテーブル内のセルの幅 (td) を設定できます。セルへの参照を取得し、CSS プロパティを使用してセルの幅を設定することで、デザインのニーズに合わせてセルのサイズを効果的に変更できます。

以上がJavaScriptでtdの幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。