JavaScript 检索元素的 CSS 值

Question

我目前正在制作一个基本的拖放系统，需要检索被移动元素的 top 和 left 属性。如果我这样做:

var mover = document.getElementById('mover');
alert(mover.style.top);

不会发出任何警报 (' ')

有没有什么方法可以检索 CSS 值(在 JS 中)而不必先用 JS 定义它们？

Answer 1

如果您希望检索计算而非定义的属性，则需要使用 getComputedStyle。

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

来自 MDN 链接...

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>