js获取页面及个元素高度、宽度的代码


Posted in Javascript onApril 26, 2016

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽);
网页可见区域高: document.body.offsetHeight (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高(ff):document.body.scrollTop;
网页被卷去的高(ie): document.documentElement.scrollTop;
网页被卷去的左:document.body.scrollLeft;
网页正文部分上:window.screenTop;
网页正文部分左:window.screenLeft;
某个元素的宽度:obj.offsetWidth;
某个元素的高度:obj.offsetHeight;
某个元素的上边界到body最顶部的距离:obj.offsetTop;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offsetLeft;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offsetTop(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offsetLeft(在元素的包含元素含滚动条的情况下)

scrollTop, scrollLeft

设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性

以上这篇js获取页面及个元素高度、宽度的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 #Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 #Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 #Javascript
js 求时间差的实现代码
Apr 26 #Javascript
Bootstrap表单组件教程详解
Apr 26 #Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 #Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 #Javascript
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python基础梳理(一)(推荐)
2019/04/06 Python
django的csrf实现过程详解
2019/07/26 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python中base64与xml取值结合问题
2019/12/22 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
运动会广播稿诗歌版
2014/09/12 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python