js的一些常用控制div的概念學習(重要)

2021-09-08 15:29:48 字數 3716 閱讀 1850

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

p>

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

p>

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;"

>

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

p>

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; "

>

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

p>

div>

<

script

>

alert(container.offsetheight);

alert(container.scrollheight);

script

>

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

js的一些常用控制div的概念學習(重要)

div.style.left 僅僅在物件的定位 position 屬性被設定時可用。否則,此屬性設定會被忽略 div.style.top 僅僅在物件的定位 position 屬性被設定時可用。否則,此屬性設定會被忽略 div.style.border 邊寬 div.style.margin 內容父級...

js的一些概念

處理函式宣告有衝突,會覆蓋 處理變數宣告時有衝突,會忽略 閉包閉包是詞法閉包的簡稱,是引用了自由變數的函式。這個被引用的自由變數將和這個函式一同存在,即使已經離開了創造它的環境變數也不例外。所以,有另一種說法認為閉包是由函式和與之相關的引用環境組合而成的實體。functionf1 f2 f1 減少全...

一些常用的JS方法

獲取位址的引數 function search param else input type file 不可編輯 今天在做專案的時候,遇到上傳文字框的問題,在firefox中,該控制項產生的文字框是預設不可編輯的,但是在ie下,該文字框可編輯,根據使用者需要,此文字框應為不可編輯。但是直接將其設定為 ...