瀏覽器對象的各類寬高

時間 2020-07-08

標籤瀏覽器對象各類欄目瀏覽器简体版

原文原文鏈接

Window對象屬性html

ScreenLeft/ScreenTop/ScreenX/ScreenY
windows

只讀整數，聲明瞭窗口的左上角在屏幕上的 x 座標和 y 座標。瀏覽器

IE、Safari 和 Opera 支持 ScreenLeft/ScreenTop安全

Firefox、Safari 支持 ScreenX/ScreenY
ide

Chrome 都支持工具

innerWidth/innerHeight
spa

只讀屬性，聲明瞭窗口的文檔顯示區的寬度和高度，以像素計。這裏的寬度和高度不包括菜單欄、工具欄以及滾動條等的高度操作系統

IE 不支持這些屬性。它用 document.documentElement 或 document.body （與 IE 的版本相關）的 clientWidth 和 clientHeight 屬性做爲替代。指針

outerWidth/outerHeightorm

只讀屬性，聲明瞭整個窗口的寬度和高度

IE不支持此屬性，且沒有提供代替的屬性

pageXOffset/pageYOffset

設置或返回當前頁面相對於窗口顯示區左上角的 X/Y 位置

Window 對象方法

moveBy( )

語法： window.moveBy(x,y)

相對窗口當前的座標，把它移動到指定的像素

x：要把窗口右移的像素

y: 要把窗口下移的像素

moveTo( )

語法： window.moveTo(x,y)

把窗口的左上角移動到一個指定的座標

x：窗口新位置的 x 座標

y: 窗口新位置的 y 座標

提示：出於安全方面的緣由，瀏覽器限制此方法使其不能把窗口移出屏幕。

resizeBy( )

語法：resizeBy(width, height)

根據指定的像素來調整窗口的大小

width：必需，要使窗口寬度增長的像素數。能夠是正、負數值

height：可選，要使窗口高度增長的像素數。能夠是正、負數值

resizeTo( )

語法：resizeTo(width, height)

把窗口的大小調整爲指定的寬度和高度

width：必需，想要調整到的窗口的寬度。以像素計

height：可選，想要調整到的窗口的高度。以像素計

scrollBy( )

語法：scrollBy(xnum, ynum)

把內容滾動指定的像素數

xnum：必需，把文檔向右滾動的像素數

ynum：必需，把文檔向下滾動的像素數

scrollTo( )

語法：scrollTo(xpos, ypos)

把內容滾動到指定的座標

xpos：必需，要在窗口文檔顯示區左上角顯示的文檔的 x 座標

ypos：必需，要在窗口文檔顯示區左上角顯示的文檔的 y 座標

Screen 對象屬性

screen.width/screen.height

顯示器屏幕的寬度/高度，以像素計

availWidth/availHeight

語法：screen.availWidth

顯示瀏覽器的屏幕的可用寬度/高度，以像素計。在windows操做系統中，這個寬/高度不包括分配給半永久特性（如屏幕底部任務欄）的垂直空間

事件對象

screenX/screenY 事件屬性

語法：event.screenX

用法：返回事件發生時，鼠標指針相對於用戶顯示器屏幕的左上角水平（垂直）座標

<body>
<div id="box"></div>

<script>
    var box = document.getElementById('box');
    box.addEventListener('click',function(event){
        var screenX = event.screenX;
        var screenY = event.screenY;
        alert('指針相對於屏幕顯示器左上角的X座標是：'+screenX+'， 指針相對於屏幕顯示器左上角的Y座標是：'+screenY);
    })

</script>

clientX/clientY 事件屬性

語法：event.clientX

用法：返回事件發生時，鼠標指針相對於瀏覽器窗口可視區域的水平（垂直）窗口座標。可視區域不包括工具欄和滾動條，IE事件和標準事件都定義了這2個屬性

<div id="box"></div>

<script>
    var box = document.getElementById('box');
    box.addEventListener('click',function(event){
        var clientX = event.clientX;
        var clientY = event.clientY;
        alert('指針相對於文檔可視區的X座標是：'+clientX+'， 指針相對於文檔可視區的Y座標是：'+clientY);
    })

</script>

offsetX/offsetY 事件屬性

語法：event.offsetX

用法：返回鼠標指針的位置，相對於事件源元素的水平（垂直座標），只有IE有這兩個屬性，標準事件沒有對應的屬性

<body>
<div id="box"></div>

<script>
    var box = document.getElementById('box');
    box.addEventListener('click',function(event){
        var offsetX = event.offsetX;
        var offsetY = event.offsetY;
        alert('指針相對於box的X座標是：'+offsetX+'， 指針相對於box的Y座標是：'+offsetY);
    })

</script>

pageX/pageY 事件屬性

語法：event.pageX

用法：返回鼠標指針的位置，相似於event.clientX、event.clientY，但它們使用的是文檔座標而非窗口座標。這2個屬性不是標準屬性，但獲得了普遍支持。IE事件中沒有這2個屬性