javascript - 如何改变类(class)的位置

Question

所以我有一个div，我想通过它的类更改它的位置，这是我的代码。

<h1 class="test">Hi!</h1>

<script>
x = document.getElementsByClassName('test')

x[0].style.top = 500;

</script>

但是位置还是一样，这是为什么呢？

Answer 1

首先，默认元素position是static，这意味着对top、right的任何操作>、bottom、left CSS 属性不会明显应用。

因此，如果您想更改 top 属性，您还需要使用以下任意值更改元素 position:

相对绝对已修复

您可以在Developer Mozilla中了解有关CSS位置的更多信息。

因此，为了使您的案例发挥作用，请使用以下代码:

<h1 class="test">Hi!</h1>

<script>
  x = document.getElementsByClassName('test')

  x[0].style.position = 'relative'; // Changed the position property to relative.
  x[0].style.top = '500px'; // Must be wrapped in quotes, and append the measurement unit in the value in this case the 'px'.

</script>

您还可以在 here 中了解有关 CSS 测量单位的更多信息。