使用Java脚本更改列表项的边距

Question

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

更具体地说，我在如何引用JavaScript文件中的列表项时遇到麻烦。我可以分别使用getElementsByClassName和getElementById通过类和id来引用元素，但是我确实需要引用类中的<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的函数，该函数接受一个数字并将所有锚点的左边距设置为所传递的数字。对于演示，然后让我每秒在设置左边距为0和20之间切换。

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

[首先，我们检查是否定义了document.getElementsByClassName-如果未定义，则可能是在较旧的浏览器中。我们用document.getElementsByClassName填充它。

然后在this helpful SO answer内部，我们可以使用updateAnchorMarginsTo将所有getElementsByClassName元素与li menu-item一起获得。我们使用class遍历每个for loop元素，并利用for（在IE6中受支持）来获取li可能包含的所有document.getElementsByTagName元素，并获取第一个元素（我们知道会只能是一个）。最后，我们更新每个document.getElementsByTagName的a，即li。

style attribute

style

尝试一下-就像我说的那样，我没有IE6测试基础结构设置，因此我很想知道是否可行。

IE6在这一点上是一个古老的浏览器。如果您必须支持它，则将需要一些努力。如果可能，最好使用较旧的jQuery版本为您提供帮助。祝你好运！