js获取浏览器的各种属性


Posted in Javascript onApril 27, 2017

网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth    (包括边线的宽);

网页可见区域高: document.body.offsetHeight   (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

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

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

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标 

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置,用:

document.documentElement.scrollTop;

而不是:

document.body.scrollTop;

documentElement 对应的是 html 标签,而 body 对应的是 body 标签

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
深入浅析React中diff算法
May 19 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
详解axios在node.js中的post使用
Apr 27 #Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
js绑定事件和解绑事件
Apr 27 #Javascript
详解ECMAScript6入门--Class对象
Apr 27 #Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 #Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 #Javascript
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
jQuery Ajax之load()方法
2009/10/12 Javascript
js jquery数组介绍
2012/07/15 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
原生js实现分页效果
2020/09/23 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python安装OpenCV的示例代码
2020/03/05 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
餐厅销售主管职责范本
2014/02/19 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
复兴之路观后感
2015/06/02 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书