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 相关文章推荐
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
代码整洁之道(重构)
Oct 25 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
php实现映射操作实例详解
2019/10/02 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python如何实现代码检查
2019/06/28 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
节能环保演讲稿
2014/08/28 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
初中差生评语
2014/12/29 职场文书
初三英语教学计划
2015/01/23 职场文书
赤壁观后感(2)
2015/06/15 职场文书
红歌会主持词
2015/07/02 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python