欢迎光临
Html5圈

HTML元素坐标定位,这些知识点得掌握

  文档坐标和视口坐标

  视口坐标是相对于窗口的坐标,而文档坐标是相对于整个文档而言。例如,在文档坐标中如果一个元素的相对于文档的Y坐标是200px,并且用户已经把浏览器向下滚动了75px,那么视口坐标中元素的Y坐标为200px – 75px = 125px。

  如何获取浏览器滚动条的位置?Window对象的pageXOffset和pageYOffset属性在所有浏览器中提供这些值,除IE8以及更早的版本。IE和所有现代浏览器也可以通过scrollLeft和scrollTop属性获取滚动条位置。

  下面代码的getScrollOffsets方法获取滚动条位置:

//以一个对象的x和y属性放回滚动条的位置
function getScrollOffsets(w){
    w = w || window;
    //除了IE 8以及更早的版本以外,其他浏览器都支持
    if(w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset};
    //对标准模式下的IE
    var d = w.document;
    if(document.compatMode == "CSS1Compat")
        return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop};
    //对怪异模式下的浏览器
    return { x: d.body.scrollLeft, y: d.body.scrollTop};
}

  有时候能够判定视口的尺寸也是非常有用的,下面的代码简便地查询视口尺寸:

//作为一个对象的w和h属性返回视口的尺寸
function getViewportSize(w){
    //使用指定的窗口, 如果不带参数则使用当前窗口
    w = w || window;

    //除了IE8及更早的版本以外,其他浏览器都能用
    if(w.innerWidth != null)
        return {w: w.innerWidth, h: w.innerHeight};

    //对标准模式下的IE(或任意浏览器)
    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};
}

  上面的两个例子已经使用到scrollLeft、scrollTop、clientWidth、clientHeight。 scrollLeft和scrollTop获取滚动条位置,而clientWidth和clientHeight获取对象的尺寸。


  查询元素的几何尺寸


  判定一个元素的尺寸和位置最简单的方法是调用它的getBoundingClientRect()方法。该方法是在IE5中引入的,而现在当前的所有浏览器都实现了。它不需要参数,返回left、right、top、bottom属性的对象。

  这个方法返回元素在视口坐标中的位置。为了转换为甚至用户滚动浏览器窗口以后任然有效的文档坐标,需要加上滚动偏移量:

//元素相对于文档的坐标位置
function getElementRect(e){
    var box = e.getBoundingClientRect();
    var offsets = getScrollOffsets();
    var x = box.left + offsets.x;
    var y = box.top + offsets.y;

    return {x:x, y: y};
}

  在很多浏览器中,getBoundingClientRect()返回的对象还包括width和height属性。但在原始的IE中未实现。可以这样计算元素的width和height:

//元素尺寸
function getElementSize(e){
    var box = getElementRect(e);
    var w = box.width || box.right - box.left;
    var h = box.height || box.bottom - box.top;

    return {w: w, h: h};
}

  滚动元素


  之前的getScrollOffsets方法可以查询滚动条的位置。该例子的scrollLeft和scrollTop属性可以用来设置让浏览器滚动,但有一种更简单的方法从Javascript最早时期开始支持的。Window对象的scrollTop()方法接口一个点的X和Y坐标(文档坐标),并作为滚动条的偏移量设置它们。下面代码滚动浏览器到文档最下面的页面可见:

//滚动到浏览器最底部
function scrollToBottom(){
    //获取文档和视口的高度
    var documentHeight = document.documentElement.offsetHeight;
    var viewportHeight = window.innerHeight; //或使用上面的getViewPortSize()方法

    //然后,滚动让最后一页在视口中可见
    window.scrollTo(0, documentHeight - viewportHeight);
}

  Window的scrollBy方法和scroll()和scrollTo()类似,但是它的参数是相对的,并在当前滚动条的偏移量上增加。例如,快速阅读者可能会喜欢这样:

javascript:void setInterval(function(){scrollBy(0, 10)}, 200);

  如果想让某个元素在文档中可见,可以利用getBoundingClientRect()计算元素的位置,并转换为文档坐标,然后使用scrollTo()方法达到目的。但在需要显示Html元素上调用scrollIntoView()方法更方便。

  scrollIntoView()的行为与设置window.location.hash为一个命名锚点的名字后浏览器产生的行为类似。


  元素尺寸、位置和溢出


  任何HTML元素的只读属性offsetWidth和offsetHeight以CSS像素返回它的屏幕尺寸。返回的尺寸包含元素的边框和内边距,除去了外边距。

  所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标。这些值是文档坐标,并直接指定元素的位置。当对于已定位元素的后代元素和一些其他元素,这些属性返回的坐标是相对于祖先元素的而非文档。

  offsetParent属性指定这些属性所相对的父元素。如果offsetParent为null,这些属性都是文档坐标,因此,一般来说,用offsetLeft和offsetTop来计算元素e的位置需要一个循环:

//计算元素位置
function getElementPosition(e){
    var x = 0, y = 0;
    while(e != null){
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }

    return {x: x, y: y };
}

  getElementPosition函数也不总是计算正确的值,下面看如何修复它。除了这些名字以offset开头的属性以外,所有的文档元素定义了其他两组属性,名字一组以client开头,另一组以scroll开头。即每个元素都有以下这些属性:

未经允许不得转载:Html5圈 » HTML元素坐标定位,这些知识点得掌握

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

HTML5网站定制 更优秀 更专业

联系我们全国服务热线

offsetWidth

clientWidth scrollWidth
offsetHeight clientHeight crollHeight
offsetLeft clientLeft scrollLeft
offsetTop clientTop scrollTop
offsetParent