js的一些常用控制div的概念學習（重要）

div.style.left; 僅僅在物件的定位(position)屬性被設定時可用。否則，此屬性設定會被忽略

div.style.top; 僅僅在物件的定位(position)屬性被設定時可用。否則，此屬性設定會被忽略

div.style.border; 邊寬

div.style.margin; 內容父級div和他該div跟其外層的距離

div.style.padding; 內容父級div和他的距離

div.offsetleft; 指 obj 相對於版面或由 offsetparent 屬性指定的父座標的計算左側位置，整型，單位畫素。

div.offsetheight; 指 obj 控制項自身的絕對高度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的高度，整型，單位畫素。

div.offsettop; obj 相對於版面或由 offsetparent 屬性指定的父座標的計算上側位置，整型，單位畫素。offsettop 唯讀

div.offsetwidth; 指 obj 控制項自身的絕對寬度，不包括因 overflow 而未顯示的部分，也就是其實際佔據的寬度，整型，單位畫素。

div.clientleft;

div.clientheight; 都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最後乙個工具條以下到狀態列以上的這個區域，與頁面內容無關。

div.clientwidth;

div.clienttop;

div.scrolltop; scrolltop指的是「元素中的內容」超出「元素上邊界」的那部分的高度。

div.scrollheight; 是元素的高度且包括滾動部分(即還沒有顯示的那部分)

div.scrollwidth; 是元素的寬度且包括滾動部分

1。obj.offsettop

obj.offsetleft

obj.offsetwidth

obj.offsetheight

等這些只是用來唯讀的讀取定位的值而要設定得通過document.getelementbyid("test").style.marginleft=200;

2scrolltop指的是「元素中的內容」超出「元素上邊界」的那部分的高度。

offsetwidth:是元素相對父元素的偏移寬度。等於border+padding+width

clientwidth：是元素的可見寬度。等於padding+width

scrollwidth:是元素的寬度且包括滾動部分。

. top

此屬性僅僅在物件的定位(position)屬性被設定時可用。否則，此屬性設定會被忽略。

div

style

="background-color:red; position:absolute; width:100px; height:100px;"

p style

="background-color:silver; position:absolute; top:-5px;"

測試top

div>

上面是乙個段落p包含在乙個div內，可以看到p的top設定為-5px後，它的上邊距超過了容器div的上邊距，超過的這段距離就是設定的5px。

需要注意的是，div和p這一對包含元素，都需要設定position為absolute才能得到想要的結果，假如父元素不設定，則子元素的參照將是更上層定義過position的元素，直到整個文件；

2. postop

postop的數值其實和top是一樣的，但區別在於，top固定了元素單位為px，而postop只是乙個數值(這一點可以通過alert("top="+id.style.top)和alert("postop="+id.style.postop)來證明)，因此一般使用postop來進行運算。

div

style

="background-color:red; position:absolute; width:100px; height:100px;"

p id

="test"

style

="background-color:silver; position:absolute;"

測試postop

div>

script

test.style.postop =15

+8;alert(

"top="+

test.style.top);

alert(

"postop="+

test.style.postop);

script

無論你使用top或postop來賦值，最後的結果都是一致的

3. scrolltop

div

id="container"

style

="background-color:silver; width:100px; height:100px; overflow:auto;"

p style

="background-color:red;"

別再做情人做只貓做只狗不做情人做只寵物至少可愛迷人和你相交不淺無謂明日會被你憎

div>

script

container.scrolltop =12

;script

這一段文字在這個100*100的div內無法完全顯示，所以設定了overflow為auto，它會出現乙個上下方向的滑動框，假如沒有設定id.scrolltop屬性的話，預設情況下滑塊位置在頂端。而設定了scrolltop值為12後，滑塊的位置改變了，預設顯示是卷過了12個象素的文字。如果設定overflow為hidden，則將會無法顯示頂部12個象素的文字。

注意設定方式是id.scrolltop，而不是id.style.scrolltop。

4. scrollheight 與 offsetheight

offsetheight是自身元素的高度，scrollheight是自身元素的高度+隱藏元素的高度。

div

id="container"

style

="background-color:silver; width:100px; height:100px; overflow:auto;"

p style

="background-color:red; height:250px; "

別再做情人做只貓做只狗不做情人做只寵物至少可愛迷人和你相交不淺無謂明日會被你憎

div>

script

alert(container.offsetheight);

alert(container.scrollheight);

script

將依次輸出100，250。因為已經指定了元素的height為100px，所以offsetheight始終為100px；內部元素為250px，而容器元素只有100px，那麼還有150px的內容它無法顯示出來，但它卻是實際存在的，所以scrollheight值為100+150=250。

js的一些常用控制div的概念學習（重要）

js的一些常用控制div的概念學習（重要）

js的一些概念

一些常用的JS方法

js的一些常用控制div的概念學習（重要）

js的一些常用控制div的概念學習（重要）

js的一些概念

一些常用的JS方法

相關推薦