javascript怎麼設定元素寬度-js教程-PHP中文網

javascript怎麼設定元素寬度

青灯夜游

發布： 2023-01-05 16:12:04

原創

11331 人瀏覽過

javascript設定元素寬度的方法：先使用「document.getElementById("id值")」語句取得元素物件；然後使用「元素物件.style.width="寬度值"」語句來設定元素的寬度。

javascript怎麼設定元素寬度

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript設定元素寬度

原則：

取得元素物件
HTML DOM Style 物件的width 屬性設定元素的寬度。

程式碼範例：

<!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預設.瀏覽器可計算出實際的寬度。 %定義基於其包含區塊的百分比寬度。 length使用 px、cm 等單位定義寬度。

找出元素的方法：

#1.根據id取得元素

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

登入後複製

2.依照標籤名字取得元素

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

登入後複製

3.根據name屬性的值取得元素

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

登入後複製

4.根據class屬性取得元素

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

登入後複製

5.根據css路徑取得元素（取得一個）

document.querySelector("css路径");

登入後複製

6.根據css路徑取得元素（取得一組）

document.querySelectorAll("css路径");

登入後複製

【建議學習：

javascript高階教學】#

以上是javascript怎麼設定元素寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！