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正则中的RegExp对象对象
Nov 07 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
canvas的神奇用法
2017/02/03 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python 实现单通道转3通道
2019/12/03 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python 8种必备的gui库
2020/08/27 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
什么是类的返射机制
2016/02/06 面试题
优秀毕业生推荐信
2013/11/02 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
JavaScript实现队列结构过程
2021/12/06 Javascript