如何找到动态创建的 li 的宽度 [重复]

Posted 2023-05-07

【中文标题】如何找到动态创建的 li 的宽度 [重复]

【英文标题】：How to find width of dynamically created li [duplicate]

【发布时间】：2019-10-22 21:05:25

【问题描述】：

最初在 div 中有 5 个按钮，我有一个动态创建按钮的代码，请参见下面的代码..

我的主要问题是添加更多按钮之后。我有上下箭头按钮来滚动 div。

我想在每次点击时滚动一个按钮或（一组按钮）。

现在每次点击我都会得到按钮的一部分。

如何在不考虑动态创建的按钮有多少宽度的情况下在每次点击时获得完整的按钮

这是我的 html 代码 sn-p

<div class="tabbar-fix" style="width: 11.2%;height: 89%;position: fixed;">
    <div class=" row" style="height:5%;width:100%">
        <div id="top-button" class="scroller" onclick="scrollLeftAbc();"><i class="glyphicon glyphicon-chevron-up"></i></a></div>
    </div>
    <div class="row" style="height:90%;width:100%;">
        <nav class="navbar navbar-inverse" id="nav-id-scroll">
            <ul class="nav navbar-nav" id="navbar-buttons">
                <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                <li><a href="#about" data-toggle="tab">about</a></li>
                <li><a href="#services" data-toggle="tab">services</a></li>
                <li><a href="#contact" data-toggle="tab">contact</a></li>
                <li><a href="#contact" data-toggle="tab">contact</a></li>
                <li><a href="#services" data-toggle="tab">services</a></li>
            </ul>
        </nav>
    </div>
    <div id="down-button" class="row" style="height:5%;width:100%">
        <div class="scroller" onclick="scrollRightAbc();"><i class="glyphicon glyphicon-chevron-down"></i></a></div>
    </div>
</div>

我创建动态按钮的功能.....

function createButton() 
  var ul = document.getElementById("navbar-buttons");
  var li = document.createElement("li");
  var link = document.createElement("a");
  var name = document.getElementById("recipient-name").value;
  link.setAttribute("href", name);
  link.setAttribute("data-toggle", "tab");
  var textName = document.createTextNode(name);
  link.appendChild(textName);
  li.appendChild(link);
  ul.appendChild(li);
  // $(li).insertBefore("#lastIcon");

这就是我尝试滚动按钮 onclick 的方式 ..

var test = 0;
function scrollToLeft() 
  test = document.querySelector("li").offsetWidth;
  console.log(test)
  document.getElementById('nav-id-scroll').scrollLeft += test;


function scrollToRight() 
  document.getElementById('nav-id-scroll').scrollLeft -= test;

【参考方案1】：

假设您要测量最后一个 li 或按钮的宽度（无论您添加什么），所以这里是相同的代码。

var button_width = $('#navbar-buttons > li:last-of-type').width();

现在，您可以使用button_width 的值。或者您可以使用$.each 将所有按钮的宽度单独计算为array。