<分区>
标签 javascript jquery html css
<分区>
最初在 div 中有 5 个按钮，我有一个动态创建按钮的代码，请参见下面的代码..
我的主要问题是在添加更多按钮之后。我有上下箭头按钮来滚动 div。
我想在每次点击时滚动一个按钮或(一组按钮)。
现在每次点击我都会得到按钮的一部分。
如何在不考虑动态创建的按钮有多少宽度的情况下在每次点击时获得完整的按钮
这是我的 Html 代码片段
<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;
}
最佳答案
假设您想要测量最后一个 li 或按钮(无论您添加什么)的宽度，所以这里有相同的代码。
var button_width = $('#navbar-buttons > li:last-of-type').width();
现在，您可以尝试使用 button_width 的值。或者您可以使用 $.each 将所有按钮的宽度单独计算到一个 array 中。
关于javascript - 如何找到动态创建的 li 的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56492925/
相关文章：
javascript - layer.find 不会通过 id 返回 Kineticjs 对象，尽管它存在
MDN 中的 JavaScript 接口(interface)
javascript - - 资源管理器的 webkit-text-stroke？
javascript - 使用 jQuery 从 XML 加载 Highcharts 系列
javascript - 如何在创建选项时更改选项的背景图像？
javascript - 使用 Javascript 查找数组中最小未使用的数字
javascript - 在 JavaScript 中获取包含哈希值和内容的完整 url
javascript - Jquery历史记录-Ajax导航-如何发出url请求和搜索请求？