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获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 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
如何把PHP转成EXE文件
2006/10/09 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
对Python 数组的切片操作详解
2018/07/02 Python
python的继承知识点总结
2018/12/10 Python
python实现微信防撤回神器
2019/04/29 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Python2与Python3的区别详解
2020/02/09 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
如何用python批量调整视频声音
2020/12/22 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
求职信的七个关键技巧
2014/02/05 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL