zoukankan      html  css  js  c++  java
  • 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;

  • 相关阅读:
    一些业内有名的网站收集
    WCF重载
    FCKEditor fckconfig.js配置,添加字体和大小 附:中文字体乱码问题解决
    查询第几条到第几条的数据的SQL语句
    SPOJ 9939 Eliminate the Conflict
    UVA 10534 Wavio Sequence
    HDU 3474 Necklace
    POJ 2823 Sliding Window
    UVA 437 The Tower of Babylon
    UVA 825 Walking on the Safe Side
  • 原文地址:https://www.cnblogs.com/siqi/p/3176364.html
Copyright © 2011-2022 走看看