JavaScriptで要素の幅を設定する方法-jsチュートリアル-php.cn

JavaScriptで要素の幅を設定する方法

青灯夜游

リリース： 2023-01-05 16:12:04

オリジナル

11237 人が閲覧しました

要素の幅を設定する Javascript メソッド: 最初に「document.getElementById("id value")」ステートメントを使用して要素オブジェクトを取得し、次に「element object.style.width="width」ステートメントを使用します。 value"" ステートメントを使用して要素の幅を設定します。

JavaScriptで要素の幅を設定する方法

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

#JavaScript は要素の幅を設定します

原則:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			img {
				width: 200px;
			}
		</style>
	</head>

	<body>
<img  id="img" src="img/1.jpg" / alt="JavaScriptで要素の幅を設定する方法" >

<p id="demo">img图片宽度为200px。</p>

<button onclick="myFunction()">设置img图片的宽度</button>

<script>
	function myFunction() {
		document.getElementById("img").style.width="300px";
		document.getElementById("demo").innerHTML="img图片宽度为300px。";
	}
</script>
	</body>

</html>

ログイン後にコピー

レンダリング:

JavaScriptで要素の幅を設定する方法説明:

Style オブジェクトの width プロパティは要素の幅を設定できます。

構文:

Object.style.width=auto|length|%

ログイン後にコピー

値auto## ＃デフォルト。ブラウザは実際の幅を計算できます。 % 含まれるブロックのパーセンテージに基づいて幅を定義します。 lengthpx、cm、その他の単位を使用して幅を定義します。要素を検索する方法:

説明

1. ID

document.getElementById("id属性的值");

ログイン後にコピー

に基づいて要素を取得します2. に基づいてタグ名要素を取得

document.getElementsByTagName("标签的名字");

ログイン後にコピー

3. name 属性の値に基づいて要素を取得

document.getElementsByName("name属性的值");

ログイン後にコピー

4. class 属性

document.getElementsByClassName("类样式的名字");

ログイン後にコピー

5 の値に基づいて要素を取得. CSS パスに基づいて要素を取得 (1 つ取得)

document.querySelector("css路径");

ログイン後にコピー

6. CSS パスに基づいて要素を取得 (グループを取得)

document.querySelectorAll("css路径");

ログイン後にコピー

[推奨学習:

JavaScript 上級チュートリアル

]

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