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

时间:2022-09-03 18:00:05

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;

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

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

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

当出现滚动条时

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左上角为坐标原点到鼠标所在点的水平距离

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

javascript获取网页各种高宽及位置总结的更多相关文章

  1. JavaScript获取网页属性包括宽、高等

    function getWindowInfo() {var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidt ...

  2. JQuery或JavaScript获取网页的宽度、高等

    最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...

  3. JS获取网页属性包括宽、高等

    JS获取网页属性包括宽.高等. function getInfo()  { // www.jbxue.com var s = "";  s += " 网页可见区域宽:&q ...

  4. JS获取IMG图片高宽

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了 ...

  5. javascript获取网页宽高,屏幕宽高,屏幕分辨率等

    ​ <script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s + ...

  6. js获取网页屏高 屏宽

    <SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document ...

  7. Javascript获取页面元素相对和绝对位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  8. 【转载】实用的Javascript获取网页屏幕可见区域高度

    本文转载原地址:这里 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 docu ...

  9. Js&lowbar;获取浏览器等高宽

     IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document. ...

随机推荐

  1. Indesign中GREP的应用

    1.查找m2,m3中的2或3:代码:(?<=m|M)(2|3)(?!\d)(查找这个可以统一改成上标) 2.删除段首空格:代码:^\s+(?=\w{2,}) 3.删除尾随空白:代码:\s+$ 4 ...

  2. Java多线程编程核心技术---学习分享

    继承Thread类实现多线程 public class MyThread extends Thread { @Override public void run() { super.run(); Sys ...

  3. class Solution&lpar;object&rpar;&colon; def fizzBuzz&lpar;self&comma; n&rpar;&colon; a &equals; &lbrack;&rsqb; i &equals; 1 while&lpar;i &lt&semi;&equals; n&rpar;&colon; if&lpar;i&percnt;15 &equals;&equals; 0&rpar;&colon; a&period;append&lpar;&quot&semi;FizzBuzz&quot&semi;&rpar; elifleetcode day&lowbar;01

    412. Fizz Buzz Write a program that outputs the string representation of numbers from 1 to n. But fo ...

  4. BICEP单元测试——随机四则运算升级版

    一.测试方法 6个值得测试的具体部位: Right-结果是否正确? B-是否所有的边界条件都是正确的? I-能查一下反向关联吗? C-能用其他手段交叉检查一下结果吗? E-你是否可以强制错误条件发生? ...

  5. 用Python获取沪深两市上市公司股票信息,提取创近10天股价新高的、停牌的、复牌不超过一天或者新发行的股票,并存入mysql数据库

    #该脚本可以提取沪深两市上市公司股票信息,并按以下信息分类:(1)当天股价创近10个交易日新高的股票:(2)停牌的股票:(3)复牌不超过一个交易日或者新发行的股票 #将分类后的股票及其信息(股价新高. ...

  6. centos7安装apue&period;3e时出错处理

    错误代码如下: /tmp/ccb9gvom.o: In function `thr_fn': barrier.c:(.text+0x6e): undefined reference to `heaps ...

  7. 如何在在WinFrom的DataGridView中做到数据持续动态加载而不卡死

    1.在这个过程我用过好几种办法 (1)使用委托的办法,这个方法可以做到持续加载,但是效果不理想会卡死 (2)开启线程的方法,会造成卡死 (3)使用另一个窗体的线程做持续加载(子窗体),让子窗体作为一个 ...

  8. spring security 判断用户是否登录 只要登录就可以访问资源

    有些情况,只要用户登录就可以访问某些资源,而不需要具体要求用户拥有哪些权限,这时候可以使用IS_AUTHENTICATED_FULLY,配置如下所示: <http auto-config='tr ...

  9. Support Vector Machines for classification

    Support Vector Machines for classification To whet your appetite for support vector machines, here’s ...

  10. extern &quot&semi;C&quot&semi; 和 DEF 文件&period;

    参考: http://www.cnblogs.com/whiteyun/archive/2011/07/22/2113560.html 问题: 如果用了 DEF 文件来导出 DLL 的函数, 还需要在 ...