美文网首页
2018-11-20

2018-11-20

作者: 条条大道通罗马 | 来源:发表于2018-11-20 17:20 被阅读0次

    窗口位置

    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()

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

    相关文章

      网友评论

          本文标题:2018-11-20

          本文链接:https://www.haomeiwen.com/subject/vamxqqtx.html