【javascript位置屬性】window對象

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　對於javascript中各種位置屬性，之前在寫特效時是需要什麼就用什麼，還沒有認認真真的系統的去總結下。在很多特效中位置屬性起著舉足輕重的作用。如果瀏覽器對每種屬性的解釋都相同，我們也不用浪費太多的精力，因為對於每一種屬性，不同的瀏覽器有著不同的解釋。

　　這篇文章涵蓋了目前各種主流對象的各種位置的屬性，如果有什麼錯誤的地方或者遺漏的地方請不要吝惜你的文字。

　　總結這些屬性，也算是對自己有個交代。

window對象

innerHeight
innerWidth
outerHtight
outerWidth
pageXOffset
pageXOffset
screenLeft
screenTop
screenX
ScreenY

　　innerHeight innerWidth

innerHeight	返回視窗的文檔顯示區的高度
innerWidth	返回視窗的文檔縣市區的寬度

　　　　瀏覽器安全色性：

執行個體代碼：【注意在FF中測試】

<html><head><script type="text/javascript">function openWin(){myWindow=window.open('','');myWindow.innerHeight="200";myWindow.innerWidth="200";myWindow.document.write("<p>This is 'myWindow'</p>");myWindow.focus();}</script></head><body><input type="button" value="Open 'myWindow'" onclick="openWin()" /></body></html>

效果實現：

　　outerHeight outerWidth

outerHeight	返回視窗的外部高度，包括工具列和捲軸
outerWidth	返回視窗的外部寬度，包括工具列和捲軸

　  瀏覽器安全色性：

代碼實現:【在FF中測試】

<html><head><script type="text/javascript">function openWin(){myWindow=window.open('','');myWindow.outerHeight="200";myWindow.outerWidth="200";myWindow.document.write("<p>This is 'myWindow'</p>");myWindow.focus();}</script></head><body><input type="button" value="Open 'myWindow'" onclick="openWin()" /></body></html>

效果實現：

pageXOffset pageYOffset

pageXOffset	聲明當前文檔向右滾動過的像素數
pageYOffset	聲明當前文檔向下滾動過的像素數

　　　　　　　　　　　　　　　　IE不支援這些屬性，IE使用document.dacumentElement或document.body的scrollLeft和scrollTop屬性。

　　瀏覽器安全色性：

　　執行個體代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> </head> <body>  <script type="text/javascript">function set(){       window.scrollBy(100,100);   alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);return true;}  </script>    <input type="button" value="click" onclick="set()"/>  1  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  1111111111111111111111111111111111111111111111111111111111111111111111111111111111

　1111111111111111111111111111111111111111111111111111111111

  11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  2  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </body></html>

　　效果執行個體：

screenTop screenLeft screenX screenY

screenTop	唯讀整數，聲明視窗的左上方的Y座標
screenLeft	唯讀整數，聲明視窗的左上方的X座標
screenX	唯讀整數，聲明視窗的左上方的X座標
screenY	唯讀整數，聲明視窗的左上方的Y座標

　　瀏覽器安全色性：

　　　　screenTop screenLeft

　　　　screenX screenY

　　執行個體代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> </head> <body>  <script type="text/javascript">function test(){if(window.screenTop){alert(screenLeft+"::"+screenTop);}else if(window.screenX){alert(screenX+"::"+screenY);}else alert("this is a joke");}  </script>  <input type="button" value="click" onclick="test()"/> </body></html>

　　效果執行個體：

　　　　在Chrom中測試：

　　　　　　在FF中測試：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More