首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >需要在javascript中计算offsetRight

需要在javascript中计算offsetRight
EN

Stack Overflow用户
提问于 2010-06-09 04:09:30
回答 4查看 16.6K关注 0票数 9

我需要计算DOM对象的offsetRight。我已经有一些相当简单的代码来获取offsetLeft,但是没有javascript的offsetRight属性。如果我添加offsetLeft和offsetWidth,会起作用吗?还是有更好的方法?

代码语言:javascript
复制
function getOffsetLeft(obj)
{
    if(obj == null)
        return 0;
    var offsetLeft = 0;
    var tmp = obj;
    while(tmp != null)
    {
        offsetLeft += tmp.offsetLeft;
        tmp = tmp.offsetParent;
    }
    return offsetLeft;
}

function getOffsetRight(obj)
{
    if (obj == null)
        return 0;
    var offsetRight = 0;
    var tmp = obj;
    while (tmp != null)
    {
        offsetRight += tmp.offsetLeft + tmp.offsetWidth;
        tmp = tmp.offsetParent;
    }
    return offsetRight;    
}
EN

回答 4

Stack Overflow用户

发布于 2020-06-04 10:46:29

不能比这更简单了:

代码语言:javascript
复制
var offsetright = window.innerWidth - obj.offsetLeft - obj.offsetWidth
票数 8
EN

Stack Overflow用户

发布于 2018-07-26 03:57:33

以下是几个选择:

1)如果您希望相对于视口使用"offsetRight“,请使用element.getBoundingClientRect().right;

2)您的示例很好,只需从元素的width + offsetLeft中减去父宽度即可。

3)最后,相对于文档,并加速遍历(offsetParent):

在本例中,我将一个伪dropdown元素定位在被引用的元素下面,但因为我要避免一些棘手的z索引问题,并且希望从右侧引用该元素并向左展开,所以我必须将其附加到body元素,并从原始父级中获取"offsetRight“。

代码语言:javascript
复制
...

// Set helper defaults
dropdownElem.style.left = 'auto';
dropdownElem.style.zIndex = '10';

// Get the elem and its offsetParent
let elem = dropdownElemContainer;
let elemOffsetParent = elem.offsetParent;

// Cache widths
let elemWidth = elem.offsetWidth;
let elemOffsetParentWidth = 0;

// Set the initial offsets
let top = elem.offsetHeight; // Because I want to visually append the elem at the bottom of the referenced bottom
let right = 0;

// Loop up the DOM getting the offsetParent elements so you don't have to traverse the entire ancestor tree
while (elemOffsetParent) {
    top += elem.offsetTop;
    elemOffsetParentWidth = elemOffsetParent.offsetWidth;
    right += elemOffsetParentWidth - (elem.offsetLeft + elemWidth); // Most important line like your own example
    // Move up the DOM
    elem = elemOffsetParent;
    elemOffsetParent = elemOffsetParent.offsetParent;
    elemWidth = elemOffsetParentWidth;
}

// Set the position and show the elem
dropdownElem.style.top = top + 'px';
dropdownElem.style.right = right + 'px';
dropdownElem.style.display = 'block';
票数 5
EN

Stack Overflow用户

发布于 2013-03-31 11:10:25

代码语言:javascript
复制
//Object references
function getObject(id) {
   var object = null;
   if (document.layers) {
    object = document.layers[id];
   } else if (document.all) {
    object = document.all[id];
   } else if (document.getElementById) {
    object = document.getElementById(id);
   }
   return object;
}
//Get pixel dimensions of screen
function getDimensions(){
    var winW = 630, winH = 460;
    if (document.body && document.body.offsetWidth) {
     winW = document.body.offsetWidth;
     winH = document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
     winW = document.documentElement.offsetWidth;
     winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
     winW = window.innerWidth;
     winH = window.innerHeight;
    }
    return{"width":winW, "height":winH}
}
//Get the location of element
function getOffsetRight(elem){
    element=getObject(elem)
    var width = element.offsetWidth
    var right = 0;
    while (element.offsetParent) { 
        right += element.offsetLeft; 
        element = element.offsetParent;
    }
    right += element.offsetLeft;
    right = getDimensions()["width"]-right
    right -= width
    return right
}

这不是万无一失的,但通常可以通过调用: getOffsetRight("object.id")获得"offsetRight“

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3000887

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档