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 相关文章推荐
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
javascript中递归的两种写法
Jan 17 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 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 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php扩展开发入门demo示例
2019/09/23 PHP
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python实现画一颗树和一片森林
2018/06/25 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
python多线程下信号处理程序示例
2019/05/31 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
艺术用品:Arteza
2018/11/25 全球购物
采购内勤岗位职责
2013/12/10 职场文书
士力架广告词
2014/03/20 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
大学活动总结格式
2014/04/29 职场文书
投标服务承诺书
2014/05/28 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers