我想将div“.indicator”放置在li元素开始的位置,所以
例如,如果我要相对于
第二李,我愿意:
indicator.style.left = li[1].getBoundingClientRect().left+"px";
这是我的代码:
var li = document.querySelectorAll(".ulcontainer > li");
var indicator = document.querySelector(".indicator");
indicator.style.left = li[1].getBoundingClientRect().left+"px";
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.ulcontainer {
white-space: nowrap;
padding: 0;
position: relative;
}
.ulcontainer li {
list-style: none;
display: inline-block;
border: 1px solid;
padding: 0 20px;
}
.indicator {
background-color: red;
display: inline-block;
position: relative;
}
<ul class="ulcontainer">
<li>OPTION 1</li><li>OPTION 2</li><li>OPTION 3</li>
</ul>
<div class="indicator">indicator</div>
问题是div getBoundingClientRect()。left没有返回
li元素的正确值。
如果运行示例,您将看到“.indicator”未启动
在目前的李开端。
为什么getBoundingClientRect()。left不返回当前值?
最佳答案
.indicator
具有相对位置。因此,任何偏移都将相对于其默认位置,而不是相对于浏览器窗口。 (相反,固定位置几乎总是相对于浏览器窗口,而绝对位置相对于最近放置的祖先,后者通常是浏览器窗口。)
由于.indicator
是块级元素,并且其直接父级是文档正文,因此其默认左位置等于文档正文的左边界。
将主体边距设置为0,它将对齐:
var li = document.querySelectorAll(".ulcontainer > li");
var indicator = document.querySelector(".indicator");
indicator.style.left = li[1].getBoundingClientRect().left+"px";
body {
margin: 0;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.ulcontainer {
white-space: nowrap;
padding: 0;
position: relative;
}
.ulcontainer li {
list-style: none;
display: inline-block;
border: 1px solid;
padding: 0 20px;
}
.indicator {
background-color: red;
display: inline-block;
position: relative;
}
<ul class="ulcontainer">
<li>OPTION 1</li><li>OPTION 2</li><li>OPTION 3</li>
</ul>
<div class="indicator">indicator</div>
关于javascript - getBoundingClientRect()。left返回错误的值吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30711548/