基本介绍

$(obj).width()与$(obj).height()

$(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条

  1. $(obj).width() = width
  2. $(obj).height() = height

$(window).width()$(window).height():获得的是屏幕可视区域的宽高,不包括滚动条与工具条。

  1. $(window).width() = width + padding
  2. $(window).height() = height + padding

document.documentElement.clientWidth与document.documentElement.clientHeight

document.documentElement.clientWidthdocument.documentElement.clientHeight获得的是屏幕可视区域的宽高,不包括滚动条与工具条,跟jquery的(window).width()与(window).height()获得的结果是一样的。

  1. document.documentElement.clientWidth = width + padding
  2. document.documentElement.clientHeight = height + padding

window.innerWidth与window.innerHeight

window.innerWidthwindow.innerHeight:获得的是可视区域的宽高,但是window.innerWidth宽度包含了纵向滚动条的宽度,window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本浏览器不支持)。

  1. window.innerWidth = width + padding + border + 纵向滚动条宽度
  2. window.innerHeight = height + padding + border + 横向滚动条高度

window.outerWidth与window.outerHeight

window.outerWidthwindow.outerHeight:获得的是加上工具条与滚动条窗口的宽度与高度。

  1. window.outerWidth = width + padding + border + 纵向滚动条宽度
  2. window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度

document.body.clientWidth与document.body.clientHeight

document.body.clientWidthdocument.body.clientHeight:document.body.clientWidth获得的也是可视区域的宽度,但是document.body.clientHeight获得的是body内容的高度,如果内容只有200px,那么这个高度也是200px,如果想通过它得到屏幕可视区域的宽高,需要样式设置,如下:

  1. body {
  2. height: 100%;
  3. overflow: hidden;
  4. }
  5. body, div, p, ul {
  6. margin: 0;
  7. padding: 0;
  8. }

最关键的是:body的height:100%影响document.body.clientHeight的值。body的margin:0,padding:0影响document.body.clientWidth的值。

offsetWidth & offsetHeight

返回本身的宽高 + padding + border + 滚动条

offsetLeft & offsetTop

所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标

1.相对于已定位元素的后代元素和一些其他元素(表格单元),这些属性返回的坐标是相对于祖先元素

2.一般元素,则是相对于文档,返回的是文档坐标

  1. //获取元素的纵坐标(相对于窗口)
  2. function getTop(e){
  3. var offset=e.offsetTop;
  4. if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  5. return offset;
  6. }
  1. //获取元素的横坐标(相对于窗口)
  2. function getLeft(e){
  3. var offset=e.offsetLeft;
  4. if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  5. return offset;
  6. }

当然上面的代码是在反复调用自身方法,也可以下面这个方法来实现,主要使用while语句:

  1. function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
  2. var t = obj.offsetTop; //获取该元素对应父容器的上边距
  3. var l = obj.offsetLeft; //对应父容器的上边距
  4. //判断是否有父容器,如果存在则累加其边距
  5. while (obj = obj.offsetParent) {//等效 obj = obj.offsetParent;while (obj != undefined)
  6. t += obj.offsetTop; //叠加父容器的上边距
  7. l += obj.offsetLeft; //叠加父容器的左边距
  8. }
  9. alert("top: " + t + " left: " + l);
  10. }

怎样理解offsetParent,人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关定位父级offsetParent的定义是:与当前元素最近的经过定位(position不等于static)的父级元素,主要分为下列几种情况 :

【1】元素自身有fixed定位,offsetParent的结果为null

  当元素自身有fixed固定定位时,我们知道固定定位的元素相对于视口进行定位,此时没有定位父级,offsetParent的结果为null

  [注意]firefox浏览器有兼容性问题

  1. <div id="test" style="position:fixed"></div>
  2. <script>
  3. //firefox并没有考虑固定定位的问题,返回<body>,其他浏览器都返回null
  4. console.log(test.offsetParent);
  5. </script>

【2】元素自身无fixed定位,且父级元素都未经过定位,offsetParent的结果为<body>

  1. <div id="test"></div>
  2. <script>
  3. console.log(test.offsetParent);//<body>
  4. </script>

【3】元素自身无fixed定位,且父级元素存在经过定位的元素,offsetParent的结果为离自身元素最近的经过定位的父级元素

  1. <div id="div0" style="position:absolute;">
  2. <div id="div1" style="position:absolute;">
  3. <div id='test'></div>
  4. </div>
  5. </div>
  6. <script>
  7. console.log(test.offsetParent); //<div id="div1">
  8. </script>

【4】<body>元素的parentNode是null

  1. console.log(document.body.offsetParent);//null

scrollWidth & scrollHeight

这两个属性是元素的内容区域加上内边距,在加上任何溢出内容的尺寸.

因此,如果没有溢出时,这些属性与clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

指定的是元素的滚动条的位置

scrollLeft和scrollTop都是可写的属性,通过设置它们来让元素中的内容滚动。

实例1:获取当前页面滚动条纵坐标的位置

获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft

各浏览器下获取scrollTop的差异:

  • IE6/7/8:可以使用 document.documentElement.scrollTop
  • IE9及以上:可以使用window.pageYOffset或者document.documentElement.scrollTop 
  • Safari:window.pageYOffset 与document.body.scrollTop都可以;
  • Firefox::火狐等等相对标准些的浏览器就省心多了,直接用window.pageYOffset 或者 document.documentElement.scrollTop
  • Chrome:谷歌浏览器只认识document.body.scrollTop;

注:标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.

由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?难道又要用JavaScript进行判断?

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,如果不考虑safari,可以这样:
var sTop=document.body.scrollTop+document.documentElement.scrollTop;(但是一般都不这样做的)
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。

获取scrollTop的值

可以使用window.pageYoffset
Window pageXOffset 和 pageYOffset 属性其定义:pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。

注意: IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.documentElement.scrollLeft" 和 "document.documentElement.scrollTop" 属性 。

由于谷歌兼容问题,可以使用document.body.scrollLeftdocument.body.scrollTop 或者window.pageXoffset与window.pageYoffset。

最终兼容做法:

  1. var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
  2. console.log(heightTop);

实例2:获取某个元素距离文档区域的距离

jQuery实现方式:

  1. var top = $('.btn').offset().top;
  2. console.log(top); //

JS实现方式:

  1. function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
  2. var t = obj.offsetTop; //获取该元素对应父容器的上边距
  3. var l = obj.offsetLeft; //对应父容器的上边距
  4. //判断是否有父容器,如果存在则累加其边距
  5. while (obj = obj.offsetParent) {
  6. t += obj.offsetTop; //叠加父容器的上边距
  7. l += obj.offsetLeft; //叠加父容器的左边距
  8. }
  9. return {
  10. x:l,
  11. y:t
  12. }
  13. }
  14.  
  15. var top2 = getPoint(document.getElementsByClassName('btn')[0]);
  16. console.log(top2.y); //2080

实例3:监听某个元素是否已经在可视区域

实现思路:获取当前监听元素距离文档的左上角的top距离;根据这个距离和当前可视区域的高度+文档滚动距离进行比较,即scrollTop <= top <=  document.documentElement.clientHeight + scrollTop

jquery实现方式:

  1. $(function(){
  2. var top = $("#btn").offset().top; //距离文档顶部的距离
  3. var windowHeight = document.documentElement.clientHeight; //可视区域的高度
  4. $(window).scroll(function(){
  5. var scrollTop = $(window).scrollTop();
  6. if(top >= scrollTop && top <= windowHeight + scrollTop){
  7. console.log('在可视区域了');
  8. }
  9. });
  10. })

JS实现方式:

  1. function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
  2. var t = obj.offsetTop; //获取该元素对应父容器的上边距
  3. var l = obj.offsetLeft; //对应父容器的上边距
  4. //判断是否有父容器,如果存在则累加其边距
  5. while (obj = obj.offsetParent) {
  6. t += obj.offsetTop; //叠加父容器的上边距
  7. l += obj.offsetLeft; //叠加父容器的左边距
  8. }
  9. return {
  10. x:l,
  11. y:t
  12. }
  13. }
  14.  
  15. window.onload = function(){
  16. var top = getPoint(document.getElementById('btn')).y; //距离文档顶部的距离
  17. var windowHeight = document.documentElement.clientHeight; //可视区域的高度
  18. window.onscroll = function(){
  19. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  20. if(top >= scrollTop && top <= windowHeight + scrollTop){
  21. console.log('在可视区域了');
  22. }
  23. }
  24. }

兼容性

1.window innerWidth 和 innerHeight 属性与outerWidth和outerHeight属性IE8以及以下不支持。

2.测试浏览器IE,火狐,谷歌,360浏览器,Safari都支持document.documentElement.clientWidth与document.documentElement.clientHeight。

结论

获取屏幕的可视区域的宽高可使用jquery的方式获得,也可以使用原生js获得,即:

document.documentElement.clientWidth与document.documentElement.clientHeight

 

JS获取元素的宽高以及offsetTop,offsetLeft等的属性值的更多相关文章

  1. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

  2. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  3. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  4. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  5. jquery获取元素各种宽高及页面宽高总结

    window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/mar ...

  6. jquery获取元素各种宽高及页面宽高

    如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){  var divWidth = $("#div").width( ...

  7. Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

  8. JS 获取网页的宽高

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  9. JS获取当前屏幕宽高

    Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

随机推荐

  1. 第84节:Java中的网络编程(中)

    第84节:Java中的网络编程(中) 实现客户端和服务端的通信: 客户端需要的操作,创建socket,明确地址和端口,进行键盘录入,获取需要的数据,然后将录入的数据发送给服务端,为socket输出流, ...

  2. Android精通之AsyncTask与ListView讲解

    版权声明:未经博主允许不得转载 AsyncTask 了解AsyncTask异步,需要了解一下异步任务(多线程),什么是线程,可以这么说线程好比边吃饭边看电视,AsyncTask是为了方便后台线程中操作 ...

  3. 浅谈static关键字的四种用法

    1.修饰成员变量 在一个person类中,一个成员变量例如 String name,当new2个person()对象时候,这2个对象在堆的位置是不同的,给name赋值张三.李四,这两个对象的name是 ...

  4. Vue SSR不可不知的问题

    Vue SSR不可不知的问题 本文主要介绍Vue SSR(vue服务端渲染)的应用场景,开发中容易遇到的一些问题,提升ssr性能的方法,以及ssr的安全性问题. ssr的应用场景 1.SEO需求 SE ...

  5. 关于 Kubernetes 中的 Volume 与 GlusterFS 分布式存储

    容器中持久化的文件生命周期是短暂的,如果容器中程序崩溃宕机,kubelet 就会重新启动,容器中的文件将会丢失,所以对于有状态的应用容器中持久化存储是至关重要的一个环节:另外很多时候一个 Pod 中可 ...

  6. mysql 开发基础系列9 存储引擎 MyISAM 介绍

    MyISAM是mysql 默认存储引擎,它不支持事务,外键.但访问速度快,对事务完整性没有要求或者以select,insert 为主的应用基本上都可以使用这个引擎.每个MyISAM在磁盘上存储成3个文 ...

  7. win32程序之子窗口编程

    win32程序之子窗口编程 一丶简介.什么是子窗口 在前边我们已经讲解了窗口的本质.以及如何注册窗口类跟创建窗口. 还讲了消息循环. 那么有很多窗口其实Windows已经帮我们创建出来了.我们直接使用 ...

  8. 在Windows Server 2008 R2上安装IIS服务

    一.Windows Server 2008 R2 介绍 1.Windows Server 2008 R2 基本概念 2.Windows Server 2008 R2 家族系列 二.VMware虚拟机安 ...

  9. SOAP报文转成JAVA对象

    在今天以前我还没有用过代码解析过SOAP报文,更别提转成JAVA对象了,今天的任务中报文这个模样的,(为防止数据信息,以下数据我故意打乱了防止泄露什么信息.) <?xml version=&qu ...

  10. Spark提高篇——RDD/DataSet/DataFrame(一)

    该部分分为两篇,分别介绍RDD与Dataset/DataFrame: 一.RDD 二.DataSet/DataFrame 先来看下官网对RDD.DataSet.DataFrame的解释: 1.RDD ...