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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
全面理解闭包机制
Jul 11 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
vue获取form表单的值示例
Oct 29 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JavaScript this 深入理解
2009/07/30 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
详解Vue方法与事件
2017/03/09 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
详解VUE调用本地json的使用方法
2019/05/15 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python 导入数据及作图的实现
2019/12/03 Python
Python截图并保存的具体实例
2021/01/14 Python
计算机应用毕业生自荐信
2013/10/23 职场文书
银行求职自荐信
2014/06/30 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
民事二审代理词
2015/05/25 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript