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 －如果未定义，则可能是在较旧的浏览器中。我们用this helpful SO answer来填充它。

然后在updateAnchorMarginsTo内，我们可以使用getElementsByClassName和li menu-item来获取所有class元素。我们使用for loop遍历每个li元素，并利用document.getElementsByTagName（在IE6中受支持）来获取a可能包含的所有li元素，并抓住第一个（我们知道只会有一个）。最后，我们更新style attribute的每个anchors中的is supported in older IE。

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版本为您提供帮助。祝你好运！

使用Javascript

1 个答案: