Question

我试过

document.getElementById('first').style.top = document.getElementById('second')
.style.top + 80;

但这似乎不起作用。如何实现这一目标？

Answer 1

是的，您可以通过解析位置并使用新值和单位部分字符串重建字符串来完成此操作。

var match = document.getElementById('second').style.top.match(^(\d+(?:\.\d+)?)(.*)$);

document.getElementById('first').style.top = (parseFloat(match[1]) + 80) + match[2];

Answer 2

Nina Scholz的回答是一个非常好的方式来做到这一点。更常见的是，在野外，你可能会看到另外两种方法。使用getComputedStyle及其getPropertyValue方法，或最常使用offsetTop和offsetLeft

获取计算样式示例

Computed Style Example

let div1 = document.getElementById('one');
let div2 = document.getElementById('two');

  // we use getComputedStyle to get the top and left of div1
  // we use slice to remove 'px' from the property value.

div1Top = getComputedStyle(div1).getPropertyValue('top').slice(0,-2);
div1Left = getComputedStyle(div1).getPropertyValue('left').slice(0,-2);

  //we can now manipulate the value any way we please
  //and set the values to the second div.

div2.style.top = (div1Top + 30) + 'px';
div2.style.left = div1Left + 'px';

偏移顶部和左侧示例

Offset Example

let div1 = document.getElementById('one');
let div2 = document.getElementById('two');

div2.style.top = (div1.offsetTop + 30) + 'px';
div2.style.left = div1.offsetLeft + 'px';

偏移更常用，因为正如您所知，它更具可读性，同时更简洁。

元素的位置可以表示为另一个加像素的位置吗？

2 个答案: