javascript获取网页各种高宽及位置总结

转载 2016年08月29日 10:35:50

javascript获取网页各种高宽及位置总结

screen对象

获取屏幕的高宽(分辨率)

screen.width         //屏幕的宽
screen.height        //屏幕的高
screen.availWidth    //屏幕可用宽度   屏幕的像素高度减去系统部件高度之后的值
screen.availHeight   //屏幕可用高度   屏幕的像素宽度减去系统部件宽度之后的值

window对象

获得窗口位置及大小

window.screenTop     //窗口顶部距屏幕顶部的距离,窗口离电脑或手机屏幕顶部的距离
window.screenLeft    //窗口左侧距屏幕左侧的距离,窗口离电脑或手机屏幕左侧的距离
window.innerWidth    //窗口中可视区域(viewpoint)的宽度
    alert(window.innerWidth);  //chrome 1366 ff 1366 ie 1366
window.innerHeight   //窗口中可视区域(viewpoint)的高度  该值与浏览器是否显示菜单栏等因素有关
    alert(window.innerHeight); //chrome 643  ff 657  ie 673
window.outerWidth    //浏览器窗口本身的宽度(可视区域宽度+浏览器边框宽度)
    alert(window.outerWidth);  //chrome 1366 ff 1382 ie 1382  
    //说明chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框
    //ff和ie上下左右有8px的边框宽度
window.outerHeight   //浏览器窗口本身的高度
    alert(window.outerHeight); //chrome 728 ff 744 ie 744

element对象

在介绍element对象各种高宽之前有必要解释一下盒模型
默认盒模型 box-sizing:content-box;
默认盒模型

boxWidth = 2*margin + 2*border + 2*padding + width
boxHeight = 2*margin + 2*border + 2*padding + height

当不出现滚动条时

body{margin:0;}
#demo{
    width:100px;
    height:100px;
    padding:10px;
    border:20px;
    margin:30px;
    background-color:red;
}
<div id="demo">123456789 123456789</div>

clientWidth:在页面上返回内容的可视宽度(不包括边框,边距或滚动条)
clientHeight:在页面上返回内容的可视高度(不包括边框,边距或滚动条)

clientWidth = 2*padding + width - scrollbarWidth     
console.log(document.getElementById('demo').clientWidth); //120 此时scrollbarWidth=0
clientHeight = 2*padding + height - scrollbarHeight 
console.log(document.getElementById('demo').clientHeight); //120 此时scrollbarWidth=0

offsetWidth:返回元素的宽度包括边框和填充,但不包括边距
offsetHeight:返回元素的高度包括边框和填充,但不包括边距

offsetWidth = 2*border + 2*padding + width  
console.log(document.getElementById('demo').offsetWidth)    //160
offsetHeight = 2*border + 2*padding + height  
console.log(document.getElementById('demo').offsetHeight)   //160

offsetLeft: 获取对象相对于版面或由 offsetLeft属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置

console.log(document.getElementById('demo').offsetLeft)    //30
console.log(document.getElementById('demo').offsetTop)    //30

当不出现滚动条时

当出现滚动条时

body{
    margin:0;
    padding:20px;
    width:1000px;
    height:500px;
}
<div id="demo">123456789123456789</div>

scrollWidth: 返回元素的整个宽度(包括带滚动条的隐蔽的地方)
scrollHeight: 返回整个元素的高度(包括带滚动条的隐蔽的地方)

scrollWidth = 2*padding + width    
console.log(document.body.scrollWidth)    //1040
scrollHeight = 2*padding + width   
console.log(document.body.scrollHeight)   //540

scrollTop: 向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0,其值随着滚动块滚动而变化
scrollLeft: 向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0,其值随着滚动块滚动而变化

event对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
event.pageX:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的水平距离(IE8不支持)
event.pageY:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的垂直距离(IE8不支持)
event.clientX:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离
event.clientY:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离
event.screenX:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的水平距离
event.screenY:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的垂直距离
event.offsetX:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离
event.offsetY:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离
event

JavaScript及jQuery中的各种宽高属性图解

原文链接 http://blog.poetries.top/2016/12/13/js-props 声明:本文根据慕课网学习视频整理 强烈建议打开控制台自己动手练习一遍,这样印象才会深刻第一部分...
  • jingguanliuye
  • jingguanliuye
  • 2016年12月23日 09:01
  • 1472

JAVASCRIPT获取HTML网页的各种高、宽(Height、Width)

网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset...
  • jyh_jack
  • jyh_jack
  • 2017年12月14日 09:29
  • 33

js获取浏览器高和宽的基本信息:屏幕信息

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid...
  • ole_triangle_java
  • ole_triangle_java
  • 2016年12月06日 15:23
  • 218

JS获取网页高宽

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offse...
  • qq_34015851
  • qq_34015851
  • 2016年02月21日 14:12
  • 163

获取网页高宽属性

function screenInfo(){    var  s = "";   s += "/r/n网页可见区域宽:"+ document.body.clientWidth;   s += "/r/...
  • lichkui
  • lichkui
  • 2007年06月13日 17:15
  • 1235

js 各种高宽问题,浏览器高宽问题

js 获取文档以及浏览器高宽
  • okyoung188
  • okyoung188
  • 2017年03月08日 23:30
  • 161

javascript获取窗口高宽

var  s = ""; s += "/r/n网页可见区域宽:"+ document.body.clientWidth; s += "/r/n网页可见区域高:"+ document.body.clie...
  • zc668xp
  • zc668xp
  • 2008年10月26日 17:08
  • 223

JS获取网页宽高方法集合

JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高document.body....
  • aidenliu
  • aidenliu
  • 2010年07月09日 17:32
  • 3745

Android获取手机屏幕大小 — DisplayMetrics取得画面宽高的方法

编号:A3GS_TA20100113003描述:本文讲述了DisplayMetrics取得手机屏幕大小的方法。例子:有兴趣的朋友可以在登录后下载本文例子代码!例子效果图:实现步骤:第一步:建立Andr...
  • happy_6678
  • happy_6678
  • 2011年01月14日 10:37
  • 1511

浏览器各种宽、高

  • JH0610Y
  • JH0610Y
  • 2015年08月31日 16:12
  • 223
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript获取网页各种高宽及位置总结
举报原因:
原因补充:

(最多只允许输入30个字)