• javascript 获取页面尺寸/位置


    ************************************************************************
    //ie中如果全部不给定值则会都为零(宽和高在设置一个的情况则会正常获取值),ff中则返回撑开区域的大小
    元素所占区域的大小,包含padding不含border(有滚动条时会去除滚动条,可视区域的大小) 滚动条为17px
    此属性作用于行内元素时获取的都为0, 但当设置为 inline-block时,如果都ff/ie则可以根据内容自动获取宽高

    clientWidth
    clientHeight

    在有size的限制下时:实际区域的大小(当有滚动条的时候,有滚动条时会去除滚动条),包含padding
    当没有size的限制时,ie则会把边框也加上
    scrollWidth
    scrollHeight

    当在限制了元素的size的情况下,且没有混动条时上面这两个元素值是相等的

    //无论是否设置宽高都会返回正常的值,只是浏览器默认差异不同而不同
    offsetwidth 一个对象在页面中实际所占区域的大小 宽高+边框+padding+滚动条
    offsetwidth

    以上属性都是针对行内元素说的,且都会包含padding ,可以用 offsetHeight-clientHeight 求边框的值

    ************************************************************************
    alert(document.documentElement.clientHeight);
    alert(document.documentElement.scrollHeight);
    alert(document.documentElement.offsetHeight);

    document.documentElement.clientHeigh + document.documentElement.scrollTop = document.documentElement.scrollHeight

    在火狐和ie小表现效果个不一样

    alert(Fid('song').clientWidth);
    alert(Fid('song').clientHeight);

    alert(Fid('song').scrollWidth);
    alert(Fid('song').scrollHeight);

    alert(Fid('song').offsetWidth);
    alert(Fid('song').offsetHeight);
    但如果当到一个具体元素上则没有任何问题 所以在获取页面可视区域大小(浏览器的)时最好用 document.documentElement


    只能获取左边框和上边框
    clientleft
    clienttop

    ************************************************************************
    元素坐标获取(针对非static属性的元素)

    最好都设置left,top值,如果不设置当前面有其他元素时会影响他的left,top值, 会包含margin值

    offsetleft:
    offsettop:

    offsetParent 是离调用它的元素最近的已经定位了的元素,如果元素本身未定位,则其offsetParent是离它最近的文档根元素或者表格单元(table cell)。

    offsetparent 获取相的父元素 但在IE下offset对象是对当前元素到上一级元素的距离,FF则是正常的

    scrollleft 即隐藏区域的左半部分
    scrolltop

    ************************************************************************
    事件位置相关

    clientX
    clientY 是相对于视口中的位置(都支持)


    ie,opera 的offsetX, offsetY 都不算边框,但是ff(layerX, layerY)算边框 最好不要用此属性,存在兼容性问题
    offsetX(ie) layerX(ff)
    offsetY layerY 是相对于被点击的元素


    //相对于页面的坐标
    pageX = clientX + document.documentElement.scrollLeft;
    pageY = clientY + document.documentElement.scrollTop;

  • 相关阅读:
    Collection LinkedList
    java 浅拷贝和深拷贝
    Collection ArrayList
    Java 集合
    Activity、Fragment、Service、View生命周期
    Android 事件分发机制
    retrofit2.0
    Android 知识图谱
    设计模式-代理模式
    多线程-lock
  • 原文地址:https://www.cnblogs.com/siqi/p/3176364.html
Copyright © 2020-2023  润新知