Question

以下是我的代码：

HTML：

<div id="test">
This text is fixed in one spot
</div>

CSS：

#test{
    border:1px solid black;
    position: fixed;
    margin: 8px;
    right: 0px;
    bottom: 0px;
    height: 200px;
    width: 50%;
    z-Index: 4;
}

到目前为止，我能够将一个盒子固定在一个固定的位置并正确显示（高度为200像素，宽度为屏幕的50％）。屏幕宽度更改时宽度会发生变化，但我遇到的问题是我想计算框的左上角像素位置，因为我不希望框的任何部分出现在任何adsense广告的顶部单元。我的广告单元位于屏幕左侧。

我在javascript中尝试通过获取框中最左侧像素的值，如下所示：

<script>
alert(document.getElementById('test').left);
alert(document.getElementById('test').style.left);
</script>

我没有从任何一个消息框中得到一个号码。我得到的只是一个空白的＆＃34;未定义＆＃34;。

有没有办法计算方框的左上角像素位置，而不是通过javascript计时器定期推送值？

不，我不想使用Jquery。

Answer 1

我认为您要找的是offsetLeft和offsetTop方法。

＆＃13;

alert(document.getElementById('test').offsetLeft);
alert(document.getElementById('test').offsetTop);

＆＃13;

#test{
    border:1px solid black;
    position: fixed;
    margin: 8px;
    right: 0px;
    bottom: 0px;
    height: 200px;
    width: 50%;
    z-Index: 4;
}

＆＃13;

<div id="test">
This text is fixed in one spot
</div>

＆＃13;

计算＆＃34;左＆＃34; ＆＃34; top＆＃34;固定定位浮动元素的值

1 个答案: