javascript - 使用 javascript 将样式应用于具有类：容器的 div 中的最后一个元素（类：列）

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（类：“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";