窗口及元素尺寸大小位置获取方法记录

浏览器窗口滚动条位置:

  1,IE8以及更早的浏览器:window.pageXOffset,windowYOffset;

  2,所有现代浏览器:document.documentElement.scrollTop,document.decoumentElement.scrollLeft;  ----->正常模式下

             document.body.scrollTop,document.body.scrollLeft;                ----->怪异模式下

浏览器视口尺寸:

  1,IE8以及更早的浏览器:window.innerWidth,window.innerHeight;

  2,现代浏览器:document.documentElement.clientWidth,document.documentElement.clientHeight;  ----->正常模式下

           document.body.clientWidth,document.body.clientHeight;    ----->怪异模式下

元素尺寸:

  1,el.getBoundingClientRect();  -----> 返回元素的时候width,height,x,y等属性值(非实时)。

  2,el.getClientRects();  -----> 返回一组上面方法的对象,用户获取换行的内联元素每行矩形的属性(非实时)。

  3,el.offsetWidth,el.offsetHeight;  -----> 获取元素的宽高(包含边框,内边距,不包含滚动条。可用于内联元素)。

  4,el.clientWidth,el.clientHeight;  -----> 获取元素宽高(包含内边距,不包含边框和滚动条。用于内联元素的时候总是返回0)。

  5,window.innerWidth,window.innerHeight;  -----> IE8前

    注:在文档根元素上,clientWidth与innerWidth结果一样。,

  6,el.scrollWidth,el.scrollHeight;  -----> 元素宽高,包含溢出部分(不包含边框和滚动条)

元素位置:

  1,el.offsetLeft,el.offsetTop;  -----> 获取元素距离文档左侧与顶部的距离(如果上级元素设置了定位的话,获取的就是祖先元素的距离)

获取指定坐标处最上层的元素:

  1,document.elementFromPoint(x,y);  //指定坐标在视口外面的时候返回null。

设置滚动条位置:

  1,window.scrollTo(x,y);

  2,window.scrollBy(x,y);  -----> 在滚动条原有基础上递增

  3,el.scrollIntoView();  -----> 将指定元素显示视口顶部,类似锚点跳转。

  4,el.scrollLeft,el.scrollTop;  -----> 设置滚动条位置。

其他:

  1,el.clientLeft  ----> 元素内边距外侧与边框外侧的距离,通常就是返回边框的宽度(如果其间有滚动条则会包含滚动条宽度)

     el.clientRight  ----> 元素内边距外侧与边框外侧的距离,通常就是返回边框的高度(如果其间有滚动条则会包含滚动条宽度)

            

猜你喜欢

转载自www.cnblogs.com/huangzhenghaoBKY/p/9979908.html
今日推荐