CODEWITHSUNDEEP
javascriptdomstylesconsole.logvalue-of-css-property
berboş
berboş

Reputation: 43

Cannot display the top property

Hey everyone i am trying to console.log top property of an element in javascript but i only thing i see in the console is a blank line.

Also when i try to console.dir element i the top property is an empty string even though i set the top property to 100px.

Question is how do i display the top propert of an element using .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>

JS

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

Upvotes: 1

Views: 84

Answers (1)

Dula
Dula

Reputation: 1412

To get the CSS properties to Javascript.

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

Upvotes: 1

Related Questions