JavaScript获取可视区、页面内容、浏览器宽高、滚动高度

2

一、window对象

1.1 窗口左上角在屏幕上的 x 坐标 和 y 坐标(只读)

screenLeft||screenX
screenTop||screenY

窗口左上角在屏幕上的 x 坐标 和 y 坐标

兼容性
IE、Safari 和 Opera 支持 ScreenLeft/ScreenTop
Firefox、Safari 支持 ScreenX/ScreenY
Chrome 都支持

1.2 文档区宽高(只读)

文档区宽高(不含工具栏、控制台等,只是网页显示区域的宽高)

innerWidth||document.documentElement.clientWidth||document.body.clientWidth
innerHeight||document.documentElement.clientHeight||document.body.clientHeight
innerWidth是非IE写法,document是IE写法

文档区宽高

1.3 整个浏览器窗口的宽高(只读)outerWidth、outerHeight

不支持IE,IE没有获取整个浏览器窗口的宽高的方法

整个浏览器窗口的宽高

1.4 pageXOffset、pageYOffset

设置或读取当前页面相对于窗口显示区左上角的 X/Y 位置

二、event对象(事件对象)

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。

普通浏览器支持 event
ie 678 支持 window.event

所以如果需要兼容旧版浏览器的话,可以采取兼容性的写法

var event = event || window.event;

2.1 event.screenX event.screenY

返回事件发生时,鼠标指针相对于显示器屏幕的左上角水平/垂直坐标

<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>

2.2 event.clientX event.clientY

返回事件发生时,鼠标指针相对于浏览器窗口可视区域的水平/垂直窗口坐标。

可视区域不包括工具栏和滚动条,IE事件和w3c标准事件都定义了这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>

2.3 event.offsetX event.offsetY(仅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>

2.4 event.pageX event.pageY(不支持IE)

返回鼠标指针的位置,类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。

三、document对象

3.1 文档区宽高:clientWidth/clientHeight

示例图见1.2小节

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

3.2 html(body)的总宽高:offsetWidth/offsetHeight

document.documentElement.offsetWidth || document.body.offsetWidth
document.documentElement.offsetHeight || document.body.offsetHeight

获取某个元素的总宽高,也可以使用offsetWidth/offsetHeight方法。

3.3 滚动高度(滚动条滚过的长度)

document.documentElement.scrollTop || document.body.scrollTop

四、DOM对象(元素)的offset家族

4.1 计算元素宽高:offsetWidth 、 offsetHeight

offsetWidth 计算方法如下:

offsetWidth = width + border + padding

4.2 获取位置 offsetLeft 和 offsetTop

返回距离上级盒子(最近的带有定位)左边的位置。

如果父级都没有定位则以body 为准。

offsetLeft 从父级的padding 开始算 父亲的border 不算,即:就是子盒子到定位的父盒子边框到边框的距离。

4.3 获取带有定位的父级元素 offsetParent

offsetParent返回该对象的父级(带有定位)

4.4 offsetParent 和 parentNode的区别:

如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。

如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。

4.5 offsetTop 和 style.top 的区别

  1. 最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right
  2. offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
  3. offsetTop 只读,而 style.top 可读写。
  4. 如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
  5. 最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便

4.6 附:获取行内样式的宽高 ele.style.width/height

div.style.width 只能获取到行内样式,无法获取css样式表里面的样式。

五、Window 对象方法

5.1 moveBy( )

语法: window.moveBy(x,y)

相对窗口当前的坐标,把它移动到指定的像素

x:要把窗口右移的像素

y: 要把窗口下移的像素

5.2 moveTo( )

语法: window.moveTo(x,y)

把窗口的左上角移动到一个指定的坐标

x:窗口新位置的 x 坐标

y: 窗口新位置的 y 坐标

提示:出于安全方面的原因,浏览器限制此方法使其不能把窗口移出屏幕。

5.3 resizeBy( )

语法:resizeBy(width, height)

根据指定的像素来调整窗口的大小

width:必需,要使窗口宽度增加的像素数。可以是正、负数值

height:可选,要使窗口高度增加的像素数。可以是正、负数值

5.4 resizeTo( )

语法:resizeTo(width, height)

把窗口的大小调整为指定的宽度和高度

width:必需,想要调整到的窗口的宽度。以像素计

height:可选,想要调整到的窗口的高度。以像素计

5.5 scrollBy( )

语法:scrollBy(xnum, ynum)

把内容滚动指定的像素数

xnum:必需,把文档向右滚动的像素数

ynum:必需,把文档向下滚动的像素数

5.6 scrollTo( )

语法:scrollTo(xpos, ypos)

把内容滚动到指定的坐标

xpos:必需,要在窗口文档显示区左上角显示的文档的 x 坐标

ypos:必需,要在窗口文档显示区左上角显示的文档的 y 坐标


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...