我想获取 Canvas 的 X 和 Y 坐标，为此我使用 this question 中建议的解决方案。 。为了方便引用，这是我正在使用的函数(包括一些调试警报消息):
function getCumulativeOffset(obj) {
var left, top;
left = top = 0;
if (obj.offsetParent) {
do {
alert("obj id = " + obj.tagName + " (" + obj.id + ")");
left += obj.offsetLeft;
top += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return {
x : left,
y : top
};
};
但是，我没有得到我期望的结果。现在，我已将问题归结为 getCumulativeOffset 函数未拾取 HTML 中的文章标签。这里是相关的 HTML:
<body>
<article>
<canvas id="pizza" width="460" height="460">Your browser does not support the HTML5 canvas.</canvas>
</article>
<div id="temp"></div>
</body>
相关CSS:
article, aside, figure, footer, header, hgroup, nav, section {
display:block
}
body {
font: normal medium 'Gill Sans', 'Gill Sans MT', 'Goudy Bookletter 1911', 'Linux Libertine O', 'Liberation Serif', Candara, serif;
padding: 0;
margin: 0 auto;
width: 40em;
line-height: 1.75;
word-spacing: 0.1em
}
article {
text-align: center;
}
#pizza {
display: inline-block
}
由于某种原因，当我测试该函数时，文章标签似乎不是我所期望的 Canvas 的 offsetParent。这是输出:
- obj id = CANVAS(披萨)
- bj id = BODY ()
谁能解释一下吗？
最佳答案
offsetParent 引用的元素是最近的定位祖先元素，如果没有找到任何元素，则返回哪个元素有一些规则(MDN 中的 offsetParent )。设置position: relative对于<article>应该适合你的情况。
关于javascript - 为什么 offsetParent 忽略我的文章标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14031841/