0

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    
    
<style>
    #playerOne{position:absolute;top:500px;left: 500px;border:3px solid green; height: 500px;width:500px; background-color:black}   
</style>
</head>

<body>
    <div id="main">
    <div id="playerOne"></div>
    
    </div>  
<script>
var playerOneDiv = document.querySelector("#playerOne");    
    
console.log(playerOneDiv.style.top);

    
</script>   
</body>
</html>

I am not getting anything in my console when I try it like this

I am trying to mimic w3schools example but am having no luck with it, thank you.

http://w3schools-fa.ir/jsref/prop_style_top.html

  • [Duplicate](https://google.com/search?q=site%3Astackoverflow.com+js+style+property+is+blank+if+set+in+css) of [Why element.style always return empty in JS?](https://stackoverflow.com/q/50645188/4642212). – Sebastian Simon Feb 20 '21 at 00:27
  • yep kinda it does thanks, Is there a way to accomplish finding the value of the top or left value? As that is how my question was worded –  Feb 20 '21 at 00:30
  • Yes, of course. The accepted answer mentions [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) which gets _any and all_ CSS values. – Sebastian Simon Feb 20 '21 at 00:32
  • Of if you don't every style related, and just the 'top', you can use `.getClientBoundingRect().top` – Randy Casburn Feb 20 '21 at 00:42
  • I want a value not read only, is getclientboundingrect going to give me read only? @RandyCasburn –  Feb 20 '21 at 00:43
  • Answer: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#notes – Randy Casburn Feb 20 '21 at 00:49

1 Answers1

0

the issue is window imposing style from style sheet after display rendered. If you grab the window property you would be able to get imposed style properties. Please try by updating your script using following code:

<script>
    var playerOneDiv = window.getComputedStyle(document.querySelector("#playerOne")).top;
    console.log(playerOneDiv);
</script>

I hope this will help you. Thank you.

Nazmul Alam
  • 91
  • 3