發佈日期：
分類：
如何用JavaScript中‧找出HTML內div標籤的高度及闊度‧以及作出動態變動
01. 首先設置一個div標籤的css資料。特別留意是，需作出動態變動的位置(以下例子為高度)，需設定為auto或不設置，否則設定了，便不能作動態變動。
<style type="text/css">
.section_1 {
width: 200px;
height: auto;
border: 1px solid;
padding: 5px;
background: #ddd;
}
</style>
02. 第二，當然要是設定div標籤。
<div class="section_1" id="section_1"> Content here! </div>
03. 第三，用JavaScript，寫上程式碼。留意如要取得div標籤的資料，需用document.getElementById(“div_tag_name”).offsetHeight或document.getElementById(“div_tag_name”).offsetWidth，但要作出動態變動時，則要用document.getElementById(“div_tag_name”).style.height = “value”或document.getElementById(“div_tag_name”).style.width = “value”，而value後面，要加上px(代表pixel)。
<script type="text/javascript">
function after() {
document.getElementById("section_1").style.height = "400px";
var divh2 = document.getElementById("section_1").offsetHeight;
alert("div高度為："+divh2);
}
</script>
04. 最後，加上連結，便可測試效果。
<form id="f" name="f"> <input type="submit" value="Change div height" onclick="javascript:after()">
05. 測驗完了，是否會有個疑問，為甚麼高度會變成412px呢？明明設定的是400px。那是因為在最開始時，設定div標籤css資料時，padding設定了5px，而border設定了1px，兩邊加起來，就是那多出了的12px。
發佈留言