无法显示顶级属性答案

【问题标题】：Cannot display the top property无法显示顶级属性
【发布时间】：2021-11-16 16:28:58
【问题描述】：

大家好，我正在尝试在 javascript 中控制台记录元素的顶部属性，但我在控制台中看到的唯一内容是空白行。

此外，当我尝试 console.dir 元素时，即使我将 top 属性设置为 100px，top 属性也是一个空字符串。

问题是如何使用 .style.top 显示元素的顶部属性

CSS

img {
    width: 100px;
    position: absolute;
    top: 100px;
    left: 10px;
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Coin Game Starter</title>
  <link rel="stylesheet" href="app.css">
</head>

<body>
  <img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
  <img id="coin" src="https://myrealdomain.com/images/gold-coin-gif-1.gif" alt="">
  <script src="app.js"></script>
</body>

</html>

let player = document.querySelector("#player").style.top
console.log(player)

【问题讨论】：

标签： javascript dom styles console.log value-of-css-property

【解决方案1】：

将 CSS 属性转换为 Javascript。

var element = document.getElementById('player');
var styles = window.getComputedStyle(element);
var top = styles.getPropertyValue('top');
console.log(top); // 100px

【讨论】：

但我记得console.logging属性和element.style.property