代码改变世界

尺寸获取大全

2012-08-01 17:27  江苏黑马  阅读(732)  评论(0)    收藏  举报
  1. event(ie:window.event;ff:function(e){};兼容方法:function(e){e=e?e:window.event;})
    (1)当事件被触发时,鼠标指针相对于窗口文档显示区坐标
      event.clientX、event.clientY
      
    (2)当事件被触发时,鼠标指针相对于屏幕坐标
      event.screenX、event.screenY
      
  2. window
    (1)窗口文档显示区宽高(包括滚动条)
      window.innerWidth、window.innerHeight

      document.documentElement.clientWidth、document.documentElement.clientHeight

      document.body.clientWidth、document.body.clientHeight(不包括滚动条)
      
    (2)整个窗口的高度
      window.outerWidth、window.outerHeight
      
    (3)窗口左上角相对于屏幕坐标
      在Firefox等浏览器中使用的是screenX、screenY属性
      window.screenTop、window.screenLeft,window.screenX、window.screenY
      
    (4)屏幕分辨率宽高
      window.screen.width、window.screen.height
      
    (5)屏幕工作区宽高
      window.screen.availWidth、window.screen.availHeight
      
    (6)网页被卷去的宽高
      window.pageXOffset、window.pageYOffset

      document.documentElement.scrollLeft、document.documentElement.scrollTop

      document.body.scrollLeft、document.body.scrollTop
      
  3. element
    (1)
    (2)
  4. clientTopclientLeft

    返回对象的offsetLeft属性值和到当前窗口左边和上边的真实值之间的距离。MSIE 中文档并不是从 0,0 开始,而是通常有一个小的边框(通常是 2 象素),边框的大小定义在  document.body.clientLeft 和 clientTop 中

    document.documentElement.clientTop/document.documentElement.clientLeft



      
  5. offsetTopoffsetLeft
    网上看到:
    对于offsetTop和offsetLeft的值,IE和FF的解释是不一样的
    IE浏览器:是此节点相对于父节点的位移
    FF浏览器:是此节点相对于body的位移

    我实验后发现,不管是IE还是FF都是相对于body位移
    代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                #wrap {
                    margin: 100px auto;
                    width: 100px;
                    height: 100px;
                    background-color: #ddd
                }
                #content {
                    margin: 0 auto;
                    width: 20px;
                    height: 20px;
                    background-color: #f00
                }
            </style>
        </head>
        <body>
            <div id="wrap">
                <div id="content"></div>
            </div>
            <script>
                var $ = document.getElementById('content');
    
                var value = $.offsetTop;
                if ( typeof console.log == 'function') {
                    console.log(value);
                } else {
                    alert(value);
                }
            </script>
        </body>
    </html>
     当给多个祖先元素添加position:relative后,则是相对于最近的祖先元素位移,若始终没有position:relative;则相对于根元素html/body
    代码如下:
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style>
                #container {
                    width: 500px;
                    background-color: #808080;
                    position: relative
                }
                #main {
                    width: 10px;
                    height: 10px;
                    background-color: #ff0
                }
                #wrap {
                    margin: 100px auto;
                    width: 100px;
                    height: 100px;
                    background-color: #ddd;
                    position: relative;
                    margin: 20px
                }
                #content {
                    margin: 0 auto;
                    width: 20px;
                    height: 20px;
                    background-color: #f00
                }
            </style>
        </head>
        <body>
            <div id="container">
                <div id="main">
    
                </div>
                <div id="wrap">
                    <div id="content"></div>
                </div>
            </div>
            <script>
                var $ = document.getElementById('content');
    
                var value = $.offsetTop;
                if ( typeof console.log == 'function') {
                    console.log(value);
                } else {
                    alert(value);
                }
            </script>
        </body>
    </html>
  6. offsetWidthoffsetHeight与width和height的区别
    1)宽高都写在样式表里或者没有设置宽度和高度,前者才能获取宽度和高度
    2)宽和高是写在行内中,比如style="width:120px;height:120px",这中情况通过上述2个方法都能拿到宽高
    3)width是字符串 ,offsetWidth是数字 。如width= "300px "; offsetWidth  =300。
    注意:如果不是写在行内style中的属性都不能通过id.style.atrr来获取

  7. document.documentElement.offsetHeight
    除ie6浏览器,表示根节点实际高度。
  8. offsetParent属性作用

    offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素根元素的offsetParent属性 返回 null

    综上3条我们可以总结出获取一个元素坐标系的代码片段:
    //获取元素坐标
    function getEleCoordinate(ele) {
        var t = ele.offsetTop;
        var l = ele.offsetLeft;
        var w = ele.offsetWidth;
        var h = ele.offsetHeight;
        while ( ele= ele.offsetParent) {
            t += ele.offsetTop;
            l += ele.offsetLeft;
        };
        return {
            top : t,
            left : l,
            width : w,
            height : h,
            bottom : t + h,
            right : l + w
        }
    }

     

  9. document.documentElement.offsetWidthdocument.documentElement.offsetHeight(ie6-8)包括边线在内可视区域宽高。