Javascript - window.getComputedStyle returns “auto” as element top and left properties

On my webpage, I've got elements (divs, sub divs, buttons etc.) whose position is generated relative to the div they're in and to each other. This has the result that when using window.getComputedStyle, the top and left property are no number values, but simply "auto" while width and height are in px.

The problem that I need the absolute values for measuring purposes so I was wondering if there's a way to get them somehow. I was hoping window.getComputedStyle would do, but obviously it doesn't.

There's an example below, without any formatting but the same problem.

If there's a jQuery solution, I'd of course appreciate it as well.

Kind regards,

jaySon

<html>

<head>

    <title>Test</title>

    <script type="text/javascript">

        function test() {

            var style = window.getComputedStyle(document.getElementsByTagName("button")[0]);

            alert (

                "top = " + style.top +       //auto

                "nleft = " + style.left +   //auto

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <div>

        <button id="buttonTest" onClick="test()" >Test it!</button>

    </div>

</body>

</html>

asked Nov 16 '14 at 10:03

jaySon

3802417

add a comment |

There's an example below, without any formatting but the same problem.

If there's a jQuery solution, I'd of course appreciate it as well.

Kind regards,

jaySon

<html>

<head>

    <title>Test</title>

    <script type="text/javascript">

        function test() {

            var style = window.getComputedStyle(document.getElementsByTagName("button")[0]);

            alert (

                "top = " + style.top +       //auto

                "nleft = " + style.left +   //auto

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <div>

        <button id="buttonTest" onClick="test()" >Test it!</button>

    </div>

</body>

</html>

asked Nov 16 '14 at 10:03

jaySon

3802417

add a comment |

There's an example below, without any formatting but the same problem.

If there's a jQuery solution, I'd of course appreciate it as well.

Kind regards,

jaySon

<html>

<head>

    <title>Test</title>

    <script type="text/javascript">

        function test() {

            var style = window.getComputedStyle(document.getElementsByTagName("button")[0]);

            alert (

                "top = " + style.top +       //auto

                "nleft = " + style.left +   //auto

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <div>

        <button id="buttonTest" onClick="test()" >Test it!</button>

    </div>

</body>

</html>

asked Nov 16 '14 at 10:03

jaySon

3802417

There's an example below, without any formatting but the same problem.

If there's a jQuery solution, I'd of course appreciate it as well.

Kind regards,

jaySon

<html>

<head>

    <title>Test</title>

    <script type="text/javascript">

        function test() {

            var style = window.getComputedStyle(document.getElementsByTagName("button")[0]);

            alert (

                "top = " + style.top +       //auto

                "nleft = " + style.left +   //auto

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <div>

        <button id="buttonTest" onClick="test()" >Test it!</button>

    </div>

</body>

</html>

javascript jquery html css

asked Nov 16 '14 at 10:03

jaySon

3802417

asked Nov 16 '14 at 10:03

jaySon

3802417

asked Nov 16 '14 at 10:03

jaySon

3802417

asked Nov 16 '14 at 10:03

jaySon

3802417

asked Nov 16 '14 at 10:03

jaySon

3802417

add a comment |

2 Answers
2

active

oldest

votes

The getComputedStyle method returns the resolved value of CSS properties.

If the style sheet author(you) did not specify values for certain CSS properties(ie: top, right, bottom, and left) then the resolved value returned will be the default value. These CSS properties all have a default value of "auto".

If you cannot or don't want to specify a value yourself in the stylesheet and you only need coordinates relative to the top-left of the viewport, consider using Element.getBoundingClientRect():

<html>

<head>

    <title>Test</title>

    <style>

        /* Remove default styling to ensure a top and left value of 0 */

        body {margin:0; padding:0}

        button {display:block}

    </style>

    <script type="text/javascript">

        function test() {

            var button = document.getElementsByTagName("button")[0],

                style = window.getComputedStyle(button),

                coordinates = button.getBoundingClientRect();



            alert (

                "top = " + coordinates.top +

                "nleft = " + coordinates.left + 

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <button id="buttonTest" onClick="test()" >Test it!</button>

</body>

</html>

edited Nov 20 '18 at 16:07

answered Nov 17 '14 at 17:48

Edgar Sanchez

1964

For me, it returns "8" for left and top. But the <button> is inside a <div> and there are no paddings or any other offsets, so correct values for top and left should be "0". Or am I wrong?

– StanE
Oct 31 '17 at 1:06

Wow, so sorry, @StanE. I'm just seeing this response now (just over a year later, nbd 😇). The body has a margin of 8px applied to it by the user agent. I updated the example to remove some default styling so the expected result will be 0.

– Edgar Sanchez
Nov 20 '18 at 16:10

add a comment |

There is nothing to compute for top and left when the element does have a computed position set to static(that's the default). top and left are irrelevant in this case.

answered Nov 16 '14 at 10:13

Dr.Molle

105k12155169

OK, but if I used "offsetTop" and "offsetLeft", it would return a proper value. The only problem there is that the offset positions are only relative to the surrounding element. I can't believe there should be no possibility of getting the absolute position of an element, no matter what...

– jaySon
Nov 16 '14 at 10:23

There is no js-method/property that returns the desired values. You must calculate it on your own. The basic workflow is to sum the offset(Top/Left) of the current element and each offsetParent of this element. When you use jQuery you may get it via offset()

– Dr.Molle
Nov 16 '14 at 21:16

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f26955772%2fjavascript-window-getcomputedstyle-returns-auto-as-element-top-and-left-prop%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

The getComputedStyle method returns the resolved value of CSS properties.

If you cannot or don't want to specify a value yourself in the stylesheet and you only need coordinates relative to the top-left of the viewport, consider using Element.getBoundingClientRect():

<html>

<head>

    <title>Test</title>

    <style>

        /* Remove default styling to ensure a top and left value of 0 */

        body {margin:0; padding:0}

        button {display:block}

    </style>

    <script type="text/javascript">

        function test() {

            var button = document.getElementsByTagName("button")[0],

                style = window.getComputedStyle(button),

                coordinates = button.getBoundingClientRect();



            alert (

                "top = " + coordinates.top +

                "nleft = " + coordinates.left + 

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <button id="buttonTest" onClick="test()" >Test it!</button>

</body>

</html>

edited Nov 20 '18 at 16:07

answered Nov 17 '14 at 17:48

Edgar Sanchez

1964

For me, it returns "8" for left and top. But the <button> is inside a <div> and there are no paddings or any other offsets, so correct values for top and left should be "0". Or am I wrong?

– StanE
Oct 31 '17 at 1:06

Wow, so sorry, @StanE. I'm just seeing this response now (just over a year later, nbd 😇). The body has a margin of 8px applied to it by the user agent. I updated the example to remove some default styling so the expected result will be 0.

– Edgar Sanchez
Nov 20 '18 at 16:10

add a comment |

The getComputedStyle method returns the resolved value of CSS properties.

If you cannot or don't want to specify a value yourself in the stylesheet and you only need coordinates relative to the top-left of the viewport, consider using Element.getBoundingClientRect():

<html>

<head>

    <title>Test</title>

    <style>

        /* Remove default styling to ensure a top and left value of 0 */

        body {margin:0; padding:0}

        button {display:block}

    </style>

    <script type="text/javascript">

        function test() {

            var button = document.getElementsByTagName("button")[0],

                style = window.getComputedStyle(button),

                coordinates = button.getBoundingClientRect();



            alert (

                "top = " + coordinates.top +

                "nleft = " + coordinates.left + 

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <button id="buttonTest" onClick="test()" >Test it!</button>

</body>

</html>

edited Nov 20 '18 at 16:07

answered Nov 17 '14 at 17:48

Edgar Sanchez

1964

For me, it returns "8" for left and top. But the <button> is inside a <div> and there are no paddings or any other offsets, so correct values for top and left should be "0". Or am I wrong?

– StanE
Oct 31 '17 at 1:06

Wow, so sorry, @StanE. I'm just seeing this response now (just over a year later, nbd 😇). The body has a margin of 8px applied to it by the user agent. I updated the example to remove some default styling so the expected result will be 0.

– Edgar Sanchez
Nov 20 '18 at 16:10

add a comment |

The getComputedStyle method returns the resolved value of CSS properties.

If you cannot or don't want to specify a value yourself in the stylesheet and you only need coordinates relative to the top-left of the viewport, consider using Element.getBoundingClientRect():

<html>

<head>

    <title>Test</title>

    <style>

        /* Remove default styling to ensure a top and left value of 0 */

        body {margin:0; padding:0}

        button {display:block}

    </style>

    <script type="text/javascript">

        function test() {

            var button = document.getElementsByTagName("button")[0],

                style = window.getComputedStyle(button),

                coordinates = button.getBoundingClientRect();



            alert (

                "top = " + coordinates.top +

                "nleft = " + coordinates.left + 

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <button id="buttonTest" onClick="test()" >Test it!</button>

</body>

</html>

edited Nov 20 '18 at 16:07

answered Nov 17 '14 at 17:48

Edgar Sanchez

1964

The getComputedStyle method returns the resolved value of CSS properties.

If you cannot or don't want to specify a value yourself in the stylesheet and you only need coordinates relative to the top-left of the viewport, consider using Element.getBoundingClientRect():

<html>

<head>

    <title>Test</title>

    <style>

        /* Remove default styling to ensure a top and left value of 0 */

        body {margin:0; padding:0}

        button {display:block}

    </style>

    <script type="text/javascript">

        function test() {

            var button = document.getElementsByTagName("button")[0],

                style = window.getComputedStyle(button),

                coordinates = button.getBoundingClientRect();



            alert (

                "top = " + coordinates.top +

                "nleft = " + coordinates.left + 

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <button id="buttonTest" onClick="test()" >Test it!</button>

</body>

</html>

<html>

<head>

    <title>Test</title>

    <style>

        /* Remove default styling to ensure a top and left value of 0 */

        body {margin:0; padding:0}

        button {display:block}

    </style>

    <script type="text/javascript">

        function test() {

            var button = document.getElementsByTagName("button")[0],

                style = window.getComputedStyle(button),

                coordinates = button.getBoundingClientRect();



            alert (

                "top = " + coordinates.top +

                "nleft = " + coordinates.left + 

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <button id="buttonTest" onClick="test()" >Test it!</button>

</body>

</html>

<html>

<head>

    <title>Test</title>

    <style>

        /* Remove default styling to ensure a top and left value of 0 */

        body {margin:0; padding:0}

        button {display:block}

    </style>

    <script type="text/javascript">

        function test() {

            var button = document.getElementsByTagName("button")[0],

                style = window.getComputedStyle(button),

                coordinates = button.getBoundingClientRect();



            alert (

                "top = " + coordinates.top +

                "nleft = " + coordinates.left + 

                "nwidth = " + style.width + //63px

                "nheight = " + style.height //24px

            );

        }

    </script>

</head>

<body>

    <button id="buttonTest" onClick="test()" >Test it!</button>

</body>

</html>

edited Nov 20 '18 at 16:07

answered Nov 17 '14 at 17:48

Edgar Sanchez

1964

edited Nov 20 '18 at 16:07

answered Nov 17 '14 at 17:48

Edgar Sanchez

1964

answered Nov 17 '14 at 17:48

Edgar Sanchez

1964

answered Nov 17 '14 at 17:48

Edgar Sanchez

1964

For me, it returns "8" for left and top. But the <button> is inside a <div> and there are no paddings or any other offsets, so correct values for top and left should be "0". Or am I wrong?

– StanE
Oct 31 '17 at 1:06

Wow, so sorry, @StanE. I'm just seeing this response now (just over a year later, nbd 😇). The body has a margin of 8px applied to it by the user agent. I updated the example to remove some default styling so the expected result will be 0.

– Edgar Sanchez
Nov 20 '18 at 16:10

add a comment |

For me, it returns "8" for left and top. But the <button> is inside a <div> and there are no paddings or any other offsets, so correct values for top and left should be "0". Or am I wrong?

– StanE
Oct 31 '17 at 1:06

Wow, so sorry, @StanE. I'm just seeing this response now (just over a year later, nbd 😇). The body has a margin of 8px applied to it by the user agent. I updated the example to remove some default styling so the expected result will be 0.

– Edgar Sanchez
Nov 20 '18 at 16:10

For me, it returns "8" for left and top. But the <button> is inside a <div> and there are no paddings or any other offsets, so correct values for top and left should be "0". Or am I wrong?

– StanE
Oct 31 '17 at 1:06

Wow, so sorry, @StanE. I'm just seeing this response now (just over a year later, nbd 😇). The body has a margin of 8px applied to it by the user agent. I updated the example to remove some default styling so the expected result will be 0.

– Edgar Sanchez
Nov 20 '18 at 16:10

add a comment |

There is nothing to compute for top and left when the element does have a computed position set to static(that's the default). top and left are irrelevant in this case.

answered Nov 16 '14 at 10:13

Dr.Molle

105k12155169

OK, but if I used "offsetTop" and "offsetLeft", it would return a proper value. The only problem there is that the offset positions are only relative to the surrounding element. I can't believe there should be no possibility of getting the absolute position of an element, no matter what...

– jaySon
Nov 16 '14 at 10:23

There is no js-method/property that returns the desired values. You must calculate it on your own. The basic workflow is to sum the offset(Top/Left) of the current element and each offsetParent of this element. When you use jQuery you may get it via offset()

– Dr.Molle
Nov 16 '14 at 21:16

add a comment |

There is nothing to compute for top and left when the element does have a computed position set to static(that's the default). top and left are irrelevant in this case.

answered Nov 16 '14 at 10:13

Dr.Molle

105k12155169

OK, but if I used "offsetTop" and "offsetLeft", it would return a proper value. The only problem there is that the offset positions are only relative to the surrounding element. I can't believe there should be no possibility of getting the absolute position of an element, no matter what...

– jaySon
Nov 16 '14 at 10:23

There is no js-method/property that returns the desired values. You must calculate it on your own. The basic workflow is to sum the offset(Top/Left) of the current element and each offsetParent of this element. When you use jQuery you may get it via offset()

– Dr.Molle
Nov 16 '14 at 21:16

add a comment |

There is nothing to compute for top and left when the element does have a computed position set to static(that's the default). top and left are irrelevant in this case.

answered Nov 16 '14 at 10:13

Dr.Molle

105k12155169

There is nothing to compute for top and left when the element does have a computed position set to static(that's the default). top and left are irrelevant in this case.

answered Nov 16 '14 at 10:13

Dr.Molle

105k12155169

answered Nov 16 '14 at 10:13

Dr.Molle

105k12155169

answered Nov 16 '14 at 10:13

Dr.Molle

105k12155169

answered Nov 16 '14 at 10:13

Dr.Molle

105k12155169

OK, but if I used "offsetTop" and "offsetLeft", it would return a proper value. The only problem there is that the offset positions are only relative to the surrounding element. I can't believe there should be no possibility of getting the absolute position of an element, no matter what...

– jaySon
Nov 16 '14 at 10:23

There is no js-method/property that returns the desired values. You must calculate it on your own. The basic workflow is to sum the offset(Top/Left) of the current element and each offsetParent of this element. When you use jQuery you may get it via offset()

– Dr.Molle
Nov 16 '14 at 21:16

add a comment |

OK, but if I used "offsetTop" and "offsetLeft", it would return a proper value. The only problem there is that the offset positions are only relative to the surrounding element. I can't believe there should be no possibility of getting the absolute position of an element, no matter what...

– jaySon
Nov 16 '14 at 10:23

There is no js-method/property that returns the desired values. You must calculate it on your own. The basic workflow is to sum the offset(Top/Left) of the current element and each offsetParent of this element. When you use jQuery you may get it via offset()

– Dr.Molle
Nov 16 '14 at 21:16

OK, but if I used "offsetTop" and "offsetLeft", it would return a proper value. The only problem there is that the offset positions are only relative to the surrounding element. I can't believe there should be no possibility of getting the absolute position of an element, no matter what...

– jaySon
Nov 16 '14 at 10:23

There is no js-method/property that returns the desired values. You must calculate it on your own. The basic workflow is to sum the offset(Top/Left) of the current element and each offsetParent of this element. When you use jQuery you may get it via offset()

– Dr.Molle
Nov 16 '14 at 21:16

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu