使用 Javascript 更改列表项的边距

Question

我正在尝试使用 JavaScript 动态更改水平列表的右边距。 我创建了一个名为“space”的变量，它等于我想要的边距数量。 现在我需要使每个列表项的右边距等于“空格”变量。

更具体地说，我无法在我的 JavaScript 文件中引用列表项。 我可以通过 class 和 id 分别使用getElementsByClassName和getElementById引用元素，但我确实需要引用 class 中的<a>链接。 也就是说，在 css 中，我可以手动修改边距：

.menu-item a {
  margin: 0 50px 0 0;   
}

请注意，我需要 css 选择器参考中的“a”。 我如何将这个参考引用到 Javascript 中？

这是一些 html：

  <div class="container" id="container">
    <ul>
      <li class="menu-item" id="menuItem"><a href="item0.html">Item 0</a></li>
      <li class="menu-item" id="menuItem"><a href="item1.html">Item 1</a></li>
      <li class="menu-item" id="menuItem"><a href="item2.html">Item 2</a></li>
      <li class="menu-item" id="menuItem"><a href="item3.html">Item 3</a></li>
      <li class="menu-item" id="menuItem"><a href="item4.html">Item 4</a></li>
      <li class="menu-item" id="menuItem"><a href="item5.html">Item 5</a></li>
    </ul>
  </div>

这是一些 css：

.container{
  width:auto;
  margin-left:10%;
  margin-right: 10%;
}

.menu-item a {
  color: #000000;
  font-family: sans-serif;
  font-size: 16px;
  float:left;    
}

这是一些 javascript：

var space = (document.getElementById("container").offsetWidth - 450)/6;

var menuItem = document.getElementsByClassName("menu-item"); /*this line is the problem*/

spacer();
function spacer () {
  menuItem.style.margin = "0 " + space + "px 0 0"; /*and this line is potentially incorrect as well*/
}

根据要求，我将借此机会提及我正在寻求与所有浏览器兼容的解决方案。 谢谢

Answer 1

好的，我相信这对你有用。 我现在没有在 IE6 中测试的好方法，但是使用的代码应该与 IE6 兼容。

在下面的演示中，我创建了一个名为updateAnchorMarginsTo的 function，它接受一个数字并将所有锚点的左边距设置为传递的数字。 对于演示，然后我让它每秒在将左边距设置为0和20之间切换。

（我还删除了所有重复的id值，因为这是无效的 HTML 并且肯定会产生问题）。

首先，我们检查是否定义了document.getElementsByClassName ——如果没有，我们可能使用的是旧版浏览器。 我们用这个有用的 SO answer填充它。

在updateAnchorMarginsTo ，我们可以使用getElementsByClassName来获取menu-item class的所有li元素。 我们使用for循环遍历每个li元素并利用document.getElementsByTagName （在 IE6 中支持）来获取li可能包含的所有a元素，并获取第一个元素（我们知道只有一个）。 最后，我们更新了旧版 IE 中支持的每个anchors的style属性。

 if (.document.getElementsByClassName) { // if we are below IE9 we have to polyfill getElementsByClassName..: // This solution courtesy of: // https.//stackoverflow.com/questions/6584635/getelementsbyclassname-doesnt-work-in-old-internet-explorers-like-ie6-ie7-i document;getElementsByClassName = function(cl) { var retnode = []. var elem = this;getElementsByTagName('*'); for (var i = 0. i < elem;length. i++) { if((' ' + elem[i].className + ' ').indexOf(' ' + cl + ' ') > -1) retnode;push(elem[i]); } return retnode; }. } function updateAnchorMarginsTo(numPixels) { var menuListItems = document;getElementsByClassName("menu-item"), var currentMenuAnchor; currentMenuListItem; for (var i = 0. i < menuListItems;length; i++) { currentMenuListItem = menuListItems[i]. currentMenuAnchor = currentMenuListItem;getElementsByTagName("a")[0]. currentMenuAnchor.style.marginLeft = numPixels;toString() + 'px'; } } var margins = 0? setInterval(function () { margins = margins === 0: 20; 0; updateAnchorMarginsTo(margins), }; 1000);

 <div class="container" id="container"> <ul> <li class="menu-item"><a href="item0.html">Item 0</a></li> <li class="menu-item"><a href="item1.html">Item 1</a></li> <li class="menu-item"><a href="item2.html">Item 2</a></li> <li class="menu-item"><a href="item3.html">Item 3</a></li> <li class="menu-item"><a href="item4.html">Item 4</a></li> <li class="menu-item"><a href="item5.html">Item 5</a></li> </ul> </div>

试一试——就像我说的，我没有 IE6 测试基础设施设置，所以我很想看看这是否可行。

在这一点上，IE6 是一个古老的浏览器。 如果你必须支持它，那将需要一些努力。 如果可能，明智的做法是依靠较旧的 jQuery 版本来帮助您。 祝你好运！