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之函数直接量(function(){})()
Jun 29 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 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
我的论坛源代码(四)
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
Snoopy类使用小例子
2008/04/15 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
python 中split 和 strip的实例详解
2017/07/12 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
《诺贝尔》教学反思
2014/02/17 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
公司档案管理制度
2015/08/05 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python