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 相关文章推荐
JS获取时间的方法
Jan 21 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
Javascript验证方法大全
Sep 21 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
启动仪式策划方案
2014/06/14 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers