Question

我有以下代码：

<div class="container">
 <div class="four column">some text</div>
 <div class="eight column">some text</div>
</div>
<div class="container">
 <div class="six column">some text</div>
 <div class="six column">some text</div>
</div>
<div class="container">
 <div class="twelve column">some text</div>
</div>

现在我想在每个具有“容器”类的div中添加样式到最后一个div（class：'column'）我要用javascript做。没有jquery。所以，代码变成了：

<div class="container">
 <div class="four column">some text</div>
 <div class="eight column" style='margin-right:0px;'>some text</div>
</div>
<div class="container">
 <div class="six column">some text</div>
 <div class="six column" style='margin-right:0px;>some text</div>
</div>
<div class="container">
 <div class="twelve column" style='margin-right:0px;>some text</div>
</div>

Answer 1

你可以试试像：

var containerDivs = document.querySelectorAll('.container');

for (var i=0, iLen=containerDivs.length; i<iLen; i++) {

  var columnElements = containerDivs[i].querySelectorAll('.column');
  var last = columnElements[columnElements.length - 1];
}

IE 7及更低版本不支持查询选择器API。

如果IE 8在for循环中有点复杂，你可以使用：

var last = containerDivs[i].querySelector('.column:last-of-type');

甚至完全删除循环：

var lastColumns = document.querySelectorAll('.container > .column:last-of-type');

你可以使用纯CSS：

.container > .column:last-of-type {
  margin-right:0px;
}

但IE 8也不支持。您可以使用循环和函数在缺少的浏览器中执行 getElementsByClassName 的工作。

Answer 2

您可以使用：

document.getElementsByClassName("container").lastElementChild.style.marginRight = "0px";

使用javascript将样式应用于具有class：container的div中的最后一个元素（class：column）

2 个答案: