Javascript - window.getComputedStyle返回" auto"作为元素顶部和左侧属性 [英] Javascript - window.getComputedStyle returns "auto" as element top and left properties
问题描述
在我的网页上，我有元素（divs，sub divs，buttons等），它们的位置是相对于它们所在的div和彼此生成的。这导致在使用 window.getComputedStyle 时， top 和 left 属性不是数字值，而是简单地auto，而宽度和高度在px中。
问题是我需要测量用途的绝对值，所以我想知道是否有办法让他们以某种方式。我希望 window.getComputedStyle 可以，但显然它不会。
下面有一个例子，没有任何格式，但同样的问题。
如果有jQuery解决方案，我当然会很感激它。
亲切的问候，
jaySon
< html>
< head>
< title>测试< /标题>
< script type =text / javascript>
function test（）{
var style = window.getComputedStyle（document.getElementsByTagName（button）[0]）;
alert（
top =+ style.top + // auto
\\\
left =+ style.left + // auto
\\\
width = + style.width + // 63px
\\\
height =+ style.height // 24px
）;
}
< / script>
< / head>
< body>
< div>
< button id =buttonTestonClick =test（）>测试它！< / button>
< / div>
< / body>
< / html>
getComputedStyle方法返回已解决的值的CSS属性。
如果样式表作者（您）没有为某些CSS属性指定值（即：顶部，右侧，底部和左侧），则返回的解析值将成为默认值。这些CSS属性的默认值都是auto。
如果你不能或不想在样式表中自己指定一个值，并且只需要相对坐标到视口的左上角，请考虑使用 Element.getBoundingClientRect（ ）：
< html>< head> <标题>试验< /标题> < script type =text / javascript>函数test（）{var button = document.getElementsByTagName（button）[0]，style = window.getComputedStyle（button），coordinates = button.getBoundingClientRect（）; alert（top =+ coordinates.top +\\\
left =+ coordinates.left +\\\
width =+ style.width + // 63px\\\
height =+ style.height // 24px） ; }< / script>< / head>< body> < DIV> < button id =buttonTestonClick =test（）>测试它！< / 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>
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>
<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>
<div>
<button id="buttonTest" onClick="test()" >Test it!</button>
</div>
</body>
</html>
这篇关于Javascript - window.getComputedStyle返回" auto"作为元素顶部和左侧属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
