javascript設定元素寬度的方法：先使用「document.getElementById("id值")」語句取得元素物件；然後使用「元素物件.style.width="寬度值"」語句來設定元素的寬度。
本教學操作環境：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>效果圖：
Object.style.width=auto|length|%
| #描述 | |
|---|---|
| 預設.瀏覽器可計算出實際的寬度。 | |
| 定義基於其包含區塊的百分比寬度。 | |
| 使用 px、cm 等單位定義寬度。 |
找出元素的方法：
#1.根據id取得元素document.getElementById("id属性的值");document.getElementsByTagName("标签的名字");document.getElementsByName("name属性的值");document.getElementsByClassName("类样式的名字");document.querySelector("css路径");document.querySelectorAll("css路径");javascript高階教學】#
以上是javascript怎麼設定元素寬度的詳細內容。更多資訊請關注PHP中文網其他相關文章！
