javascript 如何在javascript中获取和设置元素位置

How to get and set element position in javascript

提问by user2155362

all

全部

I'm confused about the position of an element. Let me start by how to get/set the left propety of an element.

我对元素的位置感到困惑。让我从如何获取/设置元素的左属性开始。

First, there is one way to set the element left position, use element.style.left. I copy the definition from http://www.w3schools.com/cssref/pr_pos_left.aspto below:

首先，有一种方法可以设置元素的左位置，使用 element.style.left。我将定义从http://www.w3schools.com/cssref/pr_pos_left.asp复制到下面：

1. For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of its containing element.
2. For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.

1. 对于绝对定位的元素， left 属性将元素的左边缘设置为其包含元素的左边缘的左/右的一个单位。
2. 对于相对定位的元素， left 属性将元素的左边缘设置为其正常位置的左/右单位。

so my questions are:

所以我的问题是：

1. In definition 1, is the containing element equal to the element.parentNode?
2. In definition 2, how can I get the element's normal position?

1. 在定义 1 中，包含元素是否等于 element.parentNode？
2. 在定义 2 中，如何获取元素的正常位置？

Second, we can get the left position through element.offsetLeft. If I try this way, I should know which element is the element's offsetParent. I also copy the definition which I goole from internet below:

其次，我们可以通过 element.offsetLeft 得到左边的位置。如果我尝试这种方式，我应该知道哪个元素是元素的 offsetParent。我还从下面的互联网上复制了我使用的定义：

• The offsetParent property refers to the nearest positioned (non-static) ancestor element. If there is no such element, offsetParent will refer to the body element

• offsetParent 属性是指最近的定位（非静态）祖先元素。如果没有这样的元素，offsetParent 将引用 body 元素

And I write a test Html file and try to get the offsetParent.

我编写了一个测试 Html 文件并尝试获取 offsetParent。

    <div id="div_1">
        <p id="p_1">
            Lorum ipsum...
        </p>
    </div>

    <div id="div_2" style="position: relative;">
        <p id="p_2">
            Lorum ipsum...
        </p>
    </div>
    <table id="table_1">
        <th>
        <tr>
            <td id="td_1">Cell</td>
            <td>Cell</td>
        </tr></th>
    </table>

The offsetParent of element p_1 is body, and the offsetParent of element p_2 is div_2, so far, everything's good. But I try to get the offsetParent of element td_1, the result is table_1, not body. Why? Accroding to the definition, I think it shoud be doby, because there is no nearest positioned (non-static) ancestor element.

元素p_1的offsetParent是body，元素p_2的offsetParent是div_2，到此为止，一切正常。但是我尝试获取元素td_1的offsetParent，结果是table_1，而不是body。为什么？根据定义，我认为它应该是 doby，因为没有最近的定位（非静态）祖先元素。

Hi, claustrofob, thanks for your replay, I think you have answered parts of my question, about why the td's offsetParent is table. But accroding to your another answer about style.left, I do not agree. I writed a new test file, below is the fragment:

嗨，克劳斯罗夫布，感谢您的重播，我想您已经回答了我的部分问题，即为什么 td 的 offsetParent 是表。但是根据你关于 style.left 的另一个答案，我不同意。我写了一个新的测试文件，下面是片段：

    <div id="div_2" style="border:2px solid red; width: 500; height: 300;position: relative;">
        <div  id="div_3" style="border:2px solid blue;left:100px; width: 300; height: 100;">
            <p id="p_2" style="position: relative;left: 30px">
                Lorum ipsum...
            </p>                
        </div>
    </div>

    <script>
        var p_2 = document.getElementById('p_2');
        document.write("<div>The position property of Element p_2 is "+ p_2.style.position +"</div>")
        document.write("<div>The style.left of Element p_2 is "+ p_2.style.left +"</div>")
        document.write("<div>The offsetParent of Element p_2 is "+ p_2.offsetParent.id +"</div>")
        document.write("<div>The offsetLeft of Element p_2 is "+ p_2.offsetLeft +"</div>")
        document.write("<br/>")
        var div_3 = document.getElementById('div_3');
        document.write("<div>The position property of Element div_3 is "+ (div_3.style.position ? div_3.style.position : 'not defined') +"</div>")
        document.write("<div>The style.left of Element div_3 is "+ div_3.style.left +"</div>")
        document.write("<div>The offsetParent of Element div_3 is "+ div_3.offsetParent.id +"</div>")
        document.write("<div>The offsetLeft of Element div_3 is "+ div_3.offsetLeft +"</div>")          
    </script>

The outPut is:

输出是：

The position property of Element p_2 is relative

元素 p_2 的位置属性是相对的

The style.left of Element p_2 is 30px

元素 p_2 的 style.left 为 30px

The offsetParent of Element p_2 is div_2

元素 p_2 的 offsetParent 是 div_2

The offsetLeft of Element p_2 is 30

元素 p_2 的 offsetLeft 为 30

The position property of Element div_3 is not defined

元素 div_3 的位置属性未定义

The style.left of Element div_3 is 100px

元素 div_3 的 style.left 为 100px

The offsetParent of Element div_3 is div_2

元素 div_3 的 offsetParent 是 div_2

The offsetLeft of Element div_3 is 0

元素 div_3 的 offsetLeft 为 0

If you focus on the output about element div_3, you can find obviously the style.left does no equal to the distance from element to element.offsetParent.

如果关注元素div_3的输出，很明显style.left不等于element到element.offsetParent的距离。

采纳答案by claustrofob

For relatively positioned elements top/left coordinates define offset from its normal position. It means that the element with the next style properties:

对于相对定位的元素，顶部/左侧坐标定义与其正常位置的偏移量。这意味着具有下一个样式属性的元素：

{
   position: relative;
   top: 0;
   left: 0;
}

will stay at its original position. Changing top/left will move the element from that position.

会停留在原来的位置。更改顶部/左侧将从该位置移动元素。

For absolutely positioned elements top/left defines the offset from the closest parent with relative or absolute position. You can think of it like absolutely or relatively positioned element defines a new point of origin for it's child elements. The top level point of origin is your body element.

对于绝对定位的元素，top/left 定义了距离最近父元素的相对或绝对位置的偏移量。你可以把它想象成绝对或相对定位的元素为其子元素定义一个新的原点。顶级原点是您的身体元素。