admin管理员组文章数量:1296841
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>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>2 Answers
Reset to default 7The 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>There is nothing to pute for top and left when the element does have a puted position set to static(that's the default). top and left are irrelevant in this case.
本文标签：
版权声明：本文标题：jquery - Javascript - window.getComputedStyle returns "auto" as element top and left properties - Stack Overfl 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741641299a2389933.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论