国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js中的各種寬高

banana_pi / 490人閱讀

摘要：之前項目剛寫了個判斷觸底自動加載更多的功能，發現自己對各種寬高的定義還是很模糊。嗯，就這樣過程中還是有很大收獲的

之前項目剛寫了個判斷觸底自動加載更多的功能，發現自己對各種寬、高的定義還是很模糊。終于沒有偷懶，寫了個demo理解了一下。網上也有很多整理好的文章，為了加強下自身記憶，順便也許能給些建議。

element的一些寬、高屬性
注：盒子模型： content+padding+margin+border
element.clientWidth =content + 左右padding
element.clientHeight = content + 上下padding
// 元素的內容部分 + 對應的padding（左右/上下）；當外層元素有滾動條時，該值是不包含滾動條的寬度的
// block元素 不設置width的話，默認繼承外層元素的寬度 => 因此目標元素的寬 = 外層元素是否有滾動條？(外層元素寬 - 滾動條寬度 - element的左右border - element的左右margin):(外層元素寬 - element的左右border - element的左右margin）；如果不設置height，而且padding也為0的話；即使外層元素高度值再大，目標元素的clientHeight仍為0

element.clientLeft = 左border
element.clientTop = 上border
// 元素的邊框寬度

element.scrollWidth = content + 左右padding
element.scrollHeight = content + 上下padding
// 與元素的clientWidth相同

element.scrollLeft = 超出瀏覽器部分的最左側到瀏覽器最左側的距離（即為文檔卷出瀏覽器的部分長度）
element.scrollTop = 超出瀏覽器部分的最上側到瀏覽器最上側的距離（即為文檔卷出瀏覽器的部分高度）

element.scrollWidth = content + 左右padding
element.scrollHeight = content + 上下padding
// 與元素的clientWidth相同

element.offsetWidth = content + 左右padding + 左右border
element.offsetTop = content + 上下padding + 上下border

element.offsetLeft = element最左側距離（從border外開始）外層元素的距離
element.offsetTop = element最上側距離（從border外開始）外層元素的距離
// 這個值是固定的，不會隨著滾動發生變化

注：ie/chrome/firefox獲取body的scrollTop和scrollLeft時，直接用document.body.scrollTop取到的值都是0；要改為document.documentElement.scrollTop；或者使用window.pageXOffset,這個屬性兼容性會高一些，ie8以上以及firefox、chrome都支持

window的一些寬、高屬性
window.innerWidth = 瀏覽器可視區域的寬度（包含滾動條寬度）
window.outerWidth = 瀏覽器可視區域的寬度（包含滾動條寬度）
// 在chrome/firefox上測試 window的innerWidth和outerWidth是一樣的
// **ie測試結果有點疑問，還要排查下再來補充**

window.screenLeft = 瀏覽窗口距離屏幕可視區域最左側的距離
window.screenTop = 瀏覽窗口（包含頂部地址欄、工具欄）距離屏幕可視區域最上側的距離
// chrome測試結果，在主屏幕上的結果：screenLeft:0;screenTop:0;
//但是在外接顯示屏中的瀏覽器打開就有問題；外接顯示屏的距最左側距離不是從0開始而是從主屏幕的可見區域寬度開始的，因此此時screenLeft的值為主屏幕的寬度；screenTop也一樣存在差值；外接顯示屏應該也是以主屏幕的邊界為參考
// firefox不支持這兩個屬性
// 在ie中;screenTop的最小值不是0，而是頂部地址欄和工具欄的高度。

window.screenX = 瀏覽窗口距離屏幕可視區域最左側的距離
window.screenY = 瀏覽窗口（包含頂部地址欄、工具欄）距離屏幕可視區域最上側的距離
// chrome測試結果： 與screenLeft/screenTop測試結果一致
// firefox測試結果： 與chrome的screenLeft/screenTop結果一樣
// ie測試結果都為：-8？？有點奇怪

window.pageXOffset = 超出瀏覽器部分的最左側到瀏覽器最左側的距離（即為文檔卷出瀏覽器的部分長度）
window.pageYOffset = 超出瀏覽器部分的最上側到瀏覽器最上側的距離（即為文檔卷出瀏覽器的部分高度）
// 在chrome/firefox/ie 上測試；結果都相等，且等價于scrollTop/scrollLeft的值；兼容性要好于scrollTop/scrollLeft

screen的寬/高
screen.width = 屏幕的寬度（分辨率寬）
screen.height= 屏幕的高度（分辨率高）
// 在chrome/firefox/ie 上測試；結果都相等，屏幕的分辨率，與瀏覽器窗口大小無關

screen.availWidth = 屏幕的寬度（分辨率寬）
screen.availHeight= 屏幕的高度（分辨率高）
// firefox/chrome/ie availHeight 與電腦窗口的頂部導航欄和底部導航欄的高度有關（注意不是瀏覽器內部的導航欄）
// availWidth 與電腦窗口的左側導航/工具欄和右導航/工具欄的高度有關（注意不是瀏覽器內部的導航欄）

點擊事件的event對象里的一些寬、高
e.clientX = 當前鼠標距離瀏覽器最左側的距離
e.clientY = 當前鼠標距離瀏覽器最上側的距離（不包含工具欄、地址欄）
// 原點:(0,0)
// chrome/firefox/ie  結果一致，主屏與外接屏結果也一致

e.screenX = 當前鼠標距離瀏覽器最左側的距離 
e.screenY = 當前鼠標距離瀏覽器最上側的距離（包含工具欄、地址欄）
// 原點:(0,瀏覽器的工具欄+地址欄的高度+屏幕頂部導航/工具欄的高度（如果有的話）)
// chrome/firefox/ie 在主屏上都 = clientX；在外接顯示屏中，受主屏幕影響存在偏差

e.offsetX = 當前鼠標距離當前元素最左側的距離
e.offsetY = 當前鼠標距離當前元素最上側側的距離
// chrome/firefox/ie 結果一致，主屏與外接屏結果也一致

e.pageX = 當前鼠標距離瀏覽器最左側的距離
e.pageY = 當前鼠標距離瀏覽器最上側的距離（不包含工具欄、地址欄）

e.x = 當前鼠標距離瀏覽器最左側的距離
e.y = 當前鼠標距離瀏覽器最上側的距離（不包含工具欄、地址欄）

一般而言（無外接屏幕） e.clientX = e.screenX = e.x = e.pageX；e.clientY = e.screenY = e.Y = e.pageY

寫在最后的話
心累啊，各種瀏覽器對一些屬性的支持還不一樣，結果也不一樣；以前框架用得太多，公司這邊對兼容性要求也沒有很大，所以寫法少很少有注重兼容性問題；雖然其中的大部分屬性也許一時半會兒用不到，但是捋清楚還是好的，ie的一些測試，等用同事電腦測過再回頭改改。嗯，就這樣；過程中還是有很大收獲的！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52919.html

相關文章

  • JavaScript中的各種寬高以及位置總結

    摘要：和這一對屬性是用來讀取元素的的寬度和高度的。第二部分對象在中，對于元素的運動的操作通常都會涉及到對象，而對象也存在很多位置屬性，且由于瀏覽器兼容性問題會導致這些屬性間相互混淆，這里一一講解。文章轉自中的各種寬高以及位置總結 在javascript中操作dom節點讓其運動的時候，常常會涉及到各種寬高以及位置坐標等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運動原理，同時...

    microelec 評論0 收藏0

  • JavaScript中的各種寬高屬性

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

    wangbinke 評論0 收藏0

  • JS、jQuery各種寬高屬性

    摘要：下各種寬高和下寬高分為掛載在對象和對象下的寬高屬性，先說下和的區別對象表示瀏覽器中打開的窗口，對象可以省略，比如可以簡寫為對象是對象的一部分，那么我們可以寫成，瀏覽器的文檔成為對象下的寬高屬性瀏覽器窗口內部寬度瀏覽器窗口內部高度瀏覽器窗口外 JS下各種寬高 Window和Document:JS下寬高分為掛載在Window對象和Document對象下的寬高屬性，先說下Window和Do...

    CntChen 評論0 收藏0

  • js中的各種寬高

    摘要：之前項目剛寫了個判斷觸底自動加載更多的功能，發現自己對各種寬高的定義還是很模糊。嗯，就這樣過程中還是有很大收獲的 之前項目剛寫了個判斷觸底自動加載更多的功能，發現自己對各種寬、高的定義還是很模糊。終于沒有偷懶，寫了個demo理解了一下。網上也有很多整理好的文章，為了加強下自身記憶，順便也許能給些建議。 element的一些寬、高屬性注：盒子模型： content+padding+mar...

    Thanatos 評論0 收藏0

  • js中的各種寬高

    摘要：之前項目剛寫了個判斷觸底自動加載更多的功能，發現自己對各種寬高的定義還是很模糊。嗯，就這樣過程中還是有很大收獲的 之前項目剛寫了個判斷觸底自動加載更多的功能，發現自己對各種寬、高的定義還是很模糊。終于沒有偷懶，寫了個demo理解了一下。網上也有很多整理好的文章，為了加強下自身記憶，順便也許能給些建議。 element的一些寬、高屬性注：盒子模型： content+padding+mar...

    luckyyulin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<