pageYOffset與pageXOffset屬性用法
標題中的兩個屬性在實際中少有出現,當然也不能夠就此斷定沒有它們的用武之地,所以最好還是要掌握它們的用法,下面就對此做一下簡單介紹,希望能夠捐給需要的朋友帶來幫助。
一.基本介紹:
pageYOffset屬性可以返回頁面的左上角距離瀏覽器客戶區頂端的距離。
pageXOffset屬性可以返回頁面的左上角距離瀏覽器客戶區左端的距離。
則兩個屬性的返回值可以用以下屬性替代:
1.pageYOffset可以用以下程式碼替代:
[JavaScript] 純文字檢視 複製程式碼document.documentElement.scrollTop||document.body.scrollTop
2.pageXOffset可以用以下程式碼替代:
[JavaScript] 純文字檢視 複製程式碼document.documentElement.scrollLeft||document.body.scrollLeft
二.瀏覽器相容性:
上面的兩個屬性只有在IE8以上瀏覽器或者谷歌、火狐等標準瀏覽器中支援。
三.程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0px; padding:0px; } input{ margin:200px; } #show{ width:120px; height:50px; position:fixed; top:0px; right:0px; } </style> <script type="text/javascript"> window.onload=function(){ var obt=document.getElementById("bt"); var oshow=document.getElementById("show"); obt.onclick=function(){ oshow.innerHTML="pageYOffset:"+window.pageYOffset+"<br/>" +"pageXOffset:"+window.pageXOffset; } } </script> </head> <body style="height:1000px;width:1500px;"> <div id="show"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
相關文章
- CSS zoom屬性用法CSSOOM
- React屬性用法總結React
- javascript textContent屬性用法JavaScript
- background屬性用法詳解
- UITableView 屬性用法詳解UIView
- Android屬性動畫詳解(一),屬性動畫基本用法Android動畫
- 談談ThreadStatic屬性用法thread
- css transition屬性用法介紹CSS
- javascript callee和caller屬性用法JavaScript
- css border-color屬性用法CSS
- list-style-image屬性用法
- easyui tree自定義屬性用法UI
- js的屬性物件的specified屬性用法簡單介紹JS物件
- js的returnValue屬性用法介紹JS
- input placeholder屬性用法介紹
- outerHTML屬性用法簡單介紹HTML
- html中Position屬性值介紹和position屬性四種用法HTML
- (八)Mybatis當中#{}常用屬性的用法MyBatis
- javascript innerText屬性用法簡單介紹JavaScript
- contenteditable屬性用法簡單介紹
- clientWidth和clientHeight屬性的用法client
- list-style-type屬性用法介紹
- opacity屬性用法簡單介紹
- writing-mode屬性用法介紹
- fill-opacity屬性用法詳解
- font-variant屬性用法介紹
- WPF 之 依賴屬性與附加屬性(五)
- jQuery設定disabled屬性與移除disabled屬性jQuery
- Python 類的屬性與例項屬性Python
- 內嵌標籤frameset框架屬性及用法框架
- vue.js計算屬性用法(computed)Vue.js
- 表單元素的form屬性用法介紹ORM
- overflow-x 屬性用法簡單介紹
- background-size屬性用法簡單介紹
- clientTop和clientLeft屬性用法簡單介紹client
- CSS border-width屬性用法詳解CSS
- Flex彈性盒子與容器屬性Flex
- JavaScript物件的資料屬性與訪問器屬性JavaScript物件