码迷,mamicode.com
首页 > 其他好文 > 详细

文档坐标及元素坐标等

时间:2014-06-12 22:43:53      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

 

基本


 

 

1、元素位置以像素度量,向右代表X坐标增加,向下代表Y坐标增加,X坐标和Y坐标可以相对于文档的左上角或者相对于其中显示文档的视口的左上角

2、如果没有出现滚动条时(即文档比视口小时),文档和视口坐标系统是同一个,如果出现滚动条时两种坐标系间的转换需要加上或者减去滚动的偏移量(scroll offset)

3、文档坐标在用户滚动时不会发生变化

4、getBoundingClientRect()返回的坐标包含元素的边框和内边距,不包括元素的外边距

 

三组坐标


 

 

每个html元素都有下面三组属性:

bubuko.com,布布扣
offsetWidth

offsetHeight

offsetLeft

offsetTop

offsetParent——所相对的父元素
bubuko.com,布布扣

 

bubuko.com,布布扣
clientWidth

clientHeight

clientLeft

clientTop
bubuko.com,布布扣

 

bubuko.com,布布扣
scrollWidth

scrollHeight

scrollLeft

scrollTop
bubuko.com,布布扣

 

基本关系如下图:

bubuko.com,布布扣

 

 

注意:1、对于内联元素clientLeft、clientTop、clientWidth、clientHeight 总是为0

   2、scrollWidth和scrollHeight是元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当内容与内容区域匹配没有溢出时,scrollWidth、scolHeight和clientWidth、clientHeight是相等的,当溢出时scrollWidth、scolHeight大于clientWidth、clientHeight

 

例子


 

 

eg1:查询窗口滚动条位置

bubuko.com,布布扣
function getScrollOffsets(w){
    w = w || window;
    if(w.pageXOffset != null){ //IE8前版本不能使用
        return {
            x: w.pageXOffset, 
            y: w.pageYOffset
        };
    }

    var d = w.document; //对于标准模式下IE或者其他浏览器
    if(document.compatmode == "CSS1Compat"){
        return {
            x: d.documentElement.scrolLeft, 
            y: d.documentElement.scrollTop
        };
    }

    //对于怪异模式下浏览器
    return {
        x: d.body.scrollLeft,
        y: d.body.scrollTop
    };
}
bubuko.com,布布扣

 

 

eg2:查询窗口视口尺寸

bubuko.com,布布扣
function getViewportSize(w){
    w = w || window;
    if(w.innerWidth != null){
        return {
            w: w.innerWidth,
            h: w.innerHeight
        };
    }

    var d = w.document;
    if(document.compatMode == "CSS1Compat"){
        return {
            w: d.documentElement.clientWidth,
            h: d.documentElement.clientHeight
        }
    }

    return {
        w: d.body.clientWidth,
        h: d.body.clientHeight
    }
}
bubuko.com,布布扣

 

eg3:计算元素尺寸

bubuko.com,布布扣
var box = e.getBoundingClientRect();
var offsets = getScrollOffsets();
var x = box.left + offsets.x;
var y = box.top + offsets.y;
var w = box.width || (box.right - box.left); //原始的IE中getBoundingsClientRect中没有width和height属性
var h = box.height || (box.bottom - box.top);
bubuko.com,布布扣

 

  

 

 

 

 

文档坐标及元素坐标等,布布扣,bubuko.com

文档坐标及元素坐标等

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/wishyouhappy/p/3781428.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!