2018-11-20

窗口位置

  1. 屏幕可视窗口大小:
    原生方法:

window.innerHeight 标准浏览器及IE9+ || document.documentElement.clientHeight 标准浏览器及低版本IE标准模式 ||document.body.clientHeight 低版本混杂模式

jQuery方法:

$(window).height()

  1. 浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离:
    原生方法

window.pagYoffset——IE9+及标准浏览器 || document.documentElement.scrollTop 兼容ie低版本的标准模式 ||document.body.scrollTop 兼容混杂模式;
  
jQuery方法:
$(document).scrollTop();

  1. 获取元素的尺寸:
    左边jquery方法,右边原生方法
$(o).width() = o.style.width; 
$(o).innerWidth() = o.style.width+o.style.padding;
$(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border;
$(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;

注意:要使用原生的style.xxx方法获取属性,这个元素必须已经有内嵌的样式,如<div style="...."></div>;
如果原先是通过外部或内部样式表定义css样式,必须使用o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]来获取样式值

  1. 获取元素的位置信息:
    返回元素相对于文档document顶部、左边的距离;
    jQuery:

(o).offset().top元素距离文档顶的距离,(o).offset().left元素距离文档左边缘的距离

原生:

getoffsetTop(),高程上有具体说明,这边就忽略了;

ele.getBoundingClientRect()

得到一个对象。返回元素的大小及其相对于视口的位置。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,078评论 1 45
  • 样式层叠次序:1.元素内嵌样式2.文档内嵌样式3.外部样式4.用户样式5.浏览器样式在样式属性值后面附上!impo...
    走花鹿阅读 1,235评论 0 0
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 5,356评论 1 3
  • 颜色的单位 rgb(红,绿,蓝) 字体的样式 简答题 设置文字的样式 多个文字之间用逗号分开 font-fami...
    上心心上阅读 890评论 0 0
  • 使用Kubernetes和Docker进行简单的leader选举 Kubernetes简化了运行在集群中的服务部署...
    喵喵唔的老巢阅读 949评论 0 0