javascript - 为什么链接offsetLeft考虑列表填充？

我正在阅读链接元素的offsetLeft属性，并相应地更改另一个元素的位置。但是，这仅在未对位置属性应用任何样式（甚至浏览器默认）的情况下才可以按预期工作。例如：ul填充的变化会影响li offsetLeft并导致偏离预期位置。

navbarElementsList = document.getElementsByClassName('js-element');
navbarUnderline = document.getElementById('js-underline');
let navbarElement;

for (let i = 0, len = navbarElementsList.length; i < len; i++) {
    navbarElement = navbarElementsList[i];
    navbarElementsList[i].addEventListener('click', function(event){
        let underlineStart = this.offsetLeft;
        let underlineWidth = this.offsetWidth;
        document.getElementById('js-underline').style.left = underlineStart.toString() + "px";
        document.getElementById('js-underline').style.width = underlineWidth.toString() + "px";
    });
}

ul {
    list-style-type: none;
}
li {
    display: inline;
}
a {
    cursor: pointer;
}
#js-underline {
    position: relative;
    left: 0;
    width: 25px;
    height: 5px;;
    background-color: blue;
    transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

<!DOCTYPE html>
<html lang="pl">
<head>

  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>

</head>
<body>

    <ul style=" margin-left: 40px ;">
      <li><a class="c-navbar__element js-element">aaaaaaa</a></li>
      <li><a class="c-navbar__element js-element">bbbb</a></li>
      <li><a class="c-navbar__element js-element">c</a></li>
      <li><a class="c-navbar__element js-element">ddddddddddddddd</a></li>
      <li><div id="js-underline" class="c-navbar__underline"></div></li>
    </ul>

</body>
</html>

在上面的示例中，我将ul margin-left更改为40px，不幸的是，它增加了最终的#underline位置。谁能解释这种行为，并告诉我如何正确实施？谢谢您的帮助。

最佳答案

Element.offsetNNN是相对于其offsetParent的，这里所有元素的offsetParent设置为<body>元素。

您的#js-underline也受该填充（或更确切地说，其父元素）的影响。

因此，当您将该元素的左边设置为其他元素的offsetLeft时，它自己的offsetLeft仍然存在。

一种丑陋的解决方法是在left样式为0时测量offsetLeft。

const navbarElementsList = document.getElementsByClassName('js-element');
const navbarUnderline = document.getElementById('js-underline');
const default_left = navbarUnderline.offsetLeft;
let navbarElement;

for (let i = 0, len = navbarElementsList.length; i < len; i++) {
    navbarElement = navbarElementsList[i];
    navbarElementsList[i].addEventListener('click', function(event){
        let underlineStart = this.offsetLeft;
        let underlineWidth = this.offsetWidth;
        navbarUnderline.style.left = underlineStart - default_left + "px";
        navbarUnderline.style.width = underlineWidth.toString() + "px";
    });
}

ul {
    list-style-type: none;
}
li {
    display: inline;
}
a {
    cursor: pointer;
}
#js-underline {
    position: relative;
    left: 0;
    width: 25px;
    height: 5px;;
    background-color: blue;
    transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

<!DOCTYPE html>
<html lang="pl">
<head>

  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>

</head>
<body>

    <ul style=" margin-left: 40px ;">
      <li><a class="c-navbar__element js-element">aaaaaaa</a></li>
      <li><a class="c-navbar__element js-element">bbbb</a></li>
      <li><a class="c-navbar__element js-element">c</a></li>
      <li><a class="c-navbar__element js-element">ddddddddddddddd</a></li>
      <li><div id="js-underline" class="c-navbar__underline"></div></li>
    </ul>

</body>
</html>

另一种方法是绝对定位下划线，以使页边距不再受到影响。

const navbarElementsList = document.getElementsByClassName('js-element');
const navbarUnderline = document.getElementById('js-underline');

let navbarElement;

for (let i = 0, len = navbarElementsList.length; i < len; i++) {
    navbarElement = navbarElementsList[i];
    navbarElementsList[i].addEventListener('click', function(event){
        let underlineStart = this.offsetLeft;
        let underlineWidth = this.offsetWidth;
        navbarUnderline.style.left = underlineStart + "px";
        navbarUnderline.style.width = underlineWidth + "px";
    });
}
// set to firt item
navbarElementsList[0].click();

ul {
    list-style-type: none;
}
li {
    display: inline;
}
a {
    cursor: pointer;
}
#js-underline {
    position: absolute;
    left: 0;
    width: 25px;
    height: 5px;;
    background-color: blue;
    transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

<!DOCTYPE html>
<html lang="pl">
<head>

  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>

</head>
<body>

    <ul style=" margin-left: 40px ;">
      <li><a class="c-navbar__element js-element">aaaaaaa</a></li>
      <li><a class="c-navbar__element js-element">bbbb</a></li>
      <li><a class="c-navbar__element js-element">c</a></li>
      <li><a class="c-navbar__element js-element">ddddddddddddddd</a></li>
      <li>
        <div id="js-underline" class="c-navbar__underline"></div>
      </li>
    </ul>


</body>
</html>

OffsetLeft

javascript - 为什么链接offsetLeft考虑列表填充？