jqueryで要素に幅を追加する方法-フロントエンドQ&A-php.cn

jqueryで要素に幅を追加する方法

青灯夜游

リリース： 2022-09-27 17:42:59

オリジナル

2673 人が閲覧しました

3 つの方法: 1. width() を使用して要素の幅を設定します。構文は "$(selector).width(new value)" で、新しい値は元の幅の値より大きくなります。 2. css() を使用して、構文 "$(selector).css("width","new value")" で要素の width 属性の新しい値を設定します。 3. attr() を使用して style 属性を制御し、要素の新しい幅スタイルを設定します。構文は "$(selector).attr("style","width: new value")" です。

jqueryで要素に幅を追加する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

方法 1: width() 関数を使用して幅を増やす

width() は、要素の幅を返し、一致する要素の幅を返すか設定します。

パラメータを width() に渡して、一致するすべての要素の幅を設定します。

$(selector).width(length)

ログイン後にコピー

パラメータ	説明
長さ	##オプション。要素の幅を指定します。長さの単位が指定されていない場合は、デフォルトのピクセル単位が使用されます。

例: ピクチャ要素の幅を増やす

width() のパラメータ値は、元の幅。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("img").width("200px");
                });
            });
        </script>
    </head>
    <body>
        <img  src="./img/2.jpg"    style="max-width:90%"/ alt="jqueryで要素に幅を追加する方法" ><br>
        <button>增加图片元素的宽度</button>
    </body>
</html>

ログイン後にコピー

jqueryで要素に幅を追加する方法

方法 2: css() 関数を使用して幅を増やす

css()一致する要素の 1 つ以上のスタイルプロパティを返すか、設定する要素プロパティの組み込み関数です。

css() を使用して、要素の width 属性に新しい値を設定するだけです (新しい値は古い値より大きくなります)。

例: p 要素の幅を増やす

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("p").width("350px");
                });
            });
        </script>
		<style>
			p{
				width: 200px;
				background-color: red;
			}
		</style>
    </head>
    <body>
        <p>测试段落</p>
        <button>增加p元素的宽度</button>
    </body>
</html>

ログイン後にコピー

jqueryで要素に幅を追加する方法

#メソッド 3: attr() 関数を使用して幅を増やすwidthattr() メソッドは、選択した要素の属性値を設定または返します。

attr() を使用して style 属性値を制御し、要素の新しい幅スタイルを設定するだけです (新しい値は古い値よりも大きくなります)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-3.6.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("img").attr("style","width:250px");
                });
            });
        </script>
		<style>
			p{
				width: 200px;
				background-color: red;
			}
		</style>
    </head>
    <body>
        <img  src="./img/2.jpg"    style="max-width:90%"/ alt="jqueryで要素に幅を追加する方法" ><br>
        <button>增加图片元素的宽度</button>
    </body>
</html>

ログイン後にコピー

jqueryで要素に幅を追加する方法 [推奨学習: