成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Javascript中常用寬高和坐標(biāo)屬性

wuyangnju / 1511人閱讀

摘要：是一個(gè)只讀的屬性，元素的內(nèi)容高度寬度，包括由于屬性而不可見的部分。一個(gè)只讀屬性，返回一個(gè)指向最近的包含該元素的定位元素。很有用，因?yàn)楹投际窍鄬?duì)于其內(nèi)邊距邊界的。它包括內(nèi)部的寬度和高度和，但不包括滾動(dòng)條和。

1.scrollHeight/Width

scrollHeight/Width是一個(gè)只讀的屬性，元素的內(nèi)容高度/寬度，包括由于overflow屬性而不可見的部分。不能直接從css中得到。scrollHeight/Width的值除了內(nèi)容高度/寬度，也包括padding值。
scrollWidth類似。

2.scrollTop/Left

以scrollLeft為例：
scrollLeft屬性能夠得到或者設(shè)置元素滾動(dòng)到左邊的像素值。注意(rtl和ltr會(huì)不同)

假如element不能夠scroll的時(shí)候，比如沒有設(shè)置overflow屬性。scrollLeft會(huì)被重置為0，不管你設(shè)置什么值，都不會(huì)有什么效果。（這也是很多scrollLeft失效的原因）

設(shè)置的值小于0，重置為0

設(shè)置的值超過內(nèi)容允許滾動(dòng)的最大值，重置為最大值。

注意事項(xiàng)：scrollLeft屬性是應(yīng)用在父元素上面，而不是子元素。
其它scrollTop與scrollLeft類似。

3. offsetHeight/Width

offsetHeight/Width是一個(gè)只讀屬性，返回一個(gè)元素的結(jié)構(gòu)寬度，包括元素的border和padding、滾動(dòng)條(如果存在的話)和css設(shè)置的高度/寬度。

4.offsetTop/Left

以offsetLeft為例, 返回當(dāng)前元素左上角相對(duì)于HTMLElement.offsetParent節(jié)點(diǎn)的左邊界偏移的像素值。

HTMLElement.offsetParent:一個(gè)只讀屬性，返回一個(gè)指向最近的包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table 元素或根元素（標(biāo)準(zhǔn)模式下為 html；quirks 模式下為 body）。當(dāng)元素的 style.display 設(shè)置為 "none" 時(shí)，offsetParent 返回 null。offsetParent 很有用，因?yàn)?offsetTop 和 offsetLeft 都是相對(duì)于其內(nèi)邊距邊界的。

例如：


  Short span. 
  Long span that wraps within this div.

offsetTop 類似的道理。

5.clientWidth/Height

clientWidth/Height是一個(gè)只讀屬性，對(duì)于沒有css或者內(nèi)聯(lián)元素，其值為0。它包括內(nèi)部的寬度和高度和padding，但不包括滾動(dòng)條、border和margin。

6.clientTop/Left

clientTop/Left指的是一個(gè)元素頂部/左邊框的寬度。

7. 區(qū)別

摘自stackoverflow的一幅圖，可以很好地看到之間的區(qū)別：

8.clientX/Y

clientX/Y屬性返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針向?qū)τ跒g覽器頁面（或客戶區(qū)）的水平/豎直坐標(biāo)，不包括滾動(dòng)條滾動(dòng)才能顯示的區(qū)域。定位的依據(jù)為瀏覽器窗口內(nèi)容區(qū)域的左上角。

9.offsetX/Y(experimental technology)

offsetX/Y 設(shè)置或者是得到鼠標(biāo)相對(duì)于目標(biāo)事件的父元素的內(nèi)邊界在X/Y坐標(biāo)上的位置

10.screenX/Y

screenX/Y 相對(duì)于物理屏幕/監(jiān)視器的左上角，只有你增加或減少顯示器的數(shù)量或分辨率，參考點(diǎn)才會(huì)移動(dòng)。

11.pageX/Y

pageX/Y 相對(duì)于整個(gè)渲染頁面的左上角（包括通過滾動(dòng)隱藏的部分),簡(jiǎn)單來說就是元素。

參考資料

1.Element.scrollHeight
2.Element.scrollLeft
3.HTMLElement.offsetWidth
4.HTMLElement.offsetParent
5.HTMLElement.offsetLeft
6.Element.clientHeight
7.Element.clientTop
8.Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80234.html

相關(guān)文章

  • HTML元素和事件對(duì)象中的各種寬高和位置

    摘要：元素和事件對(duì)象中的各種寬高和位置標(biāo)簽經(jīng)常被一堆的弄混，統(tǒng)一整理一下。元素中的寬高和位置屬性表示元素的內(nèi)部寬度，以像素計(jì)。表示元素實(shí)際占用的高度，包括其邊框，內(nèi)邊距和元素內(nèi)容。 HTML元素和事件對(duì)象中的各種寬高和位置 標(biāo)簽： js [TOC] 經(jīng)常被一堆的xxxWidth,xxxLeft弄混，統(tǒng)一整理一下。 1. HTML元素中的寬高和位置屬性 clientWidth 表示元素的內(nèi)...

    gggggggbong 評(píng)論0 收藏0

  • JavaScript 中那些關(guān)于坐標(biāo)和距離的屬性與方法

    摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對(duì)于當(dāng)前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關(guān)方法返回一個(gè)對(duì)象，提供當(dāng)前元素的大小位置等信息。摘自阮一峰教程四鼠標(biāo)事件接口通過添加的事件所產(chǎn)生的事件對(duì)象也是實(shí)例。 一 前言 在前端開發(fā)中總會(huì)遇到各種各樣需要使用或計(jì)算坐標(biāo)和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來并非是一件易事，大多只能現(xiàn)查，耗費(fèi)不少...

    jsummer 評(píng)論0 收藏0

  • JavaScript 中那些關(guān)于坐標(biāo)和距離的屬性與方法

    摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對(duì)于當(dāng)前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關(guān)方法返回一個(gè)對(duì)象，提供當(dāng)前元素的大小位置等信息。摘自阮一峰教程四鼠標(biāo)事件接口通過添加的事件所產(chǎn)生的事件對(duì)象也是實(shí)例。一 前言 在前端開發(fā)中總會(huì)遇到各種各樣需要使用或計(jì)算坐標(biāo)和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來并非是一件易事，大多只能現(xiàn)查，耗費(fèi)不少時(shí)間精力...

    guqiu 評(píng)論0 收藏0

  • JavaScript中的各種寬高屬性

    摘要：在中，存在著多的關(guān)于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對(duì)象的屬性引用的是對(duì)象，表示該窗口中當(dāng)前顯示文檔的。如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動(dòng)條的寬高。 在js中，存在著N多的關(guān)于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

    wangbinke 評(píng)論0 收藏0

  • 03.Android之View原理問題

    摘要：這種自定義控件在原生控件提供的方法外，可以自己添加一些方法。從頂層父到子遞歸調(diào)用方法，方法又回調(diào)。 目錄介紹 3.0.0.1 View的繪制需要經(jīng)過哪些過程？有哪些常用回調(diào)方法？View的繪制流程的詳細(xì)流程是怎樣的？ 3.0.0.2 View繪制流程，當(dāng)一個(gè)TextView的實(shí)例調(diào)用setText()方法后執(zhí)行了什么？請(qǐng)說一下原理…… 3.0.0.3 requestLayout()、...

    FrozenMap 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<