javascript - 选择类的所有元素并遍历每个偶数对象（第 n 个子（偶数）替换）

Question

我正在显示字母表，每个字母都具有相同的背景（宽度 31px ）。我需要一半的字母宽度为 30px。这由以下人员处理：

div.alpha:nth-child(even) {width: 30px;}

但是，由于伪兼容性问题，这在 ie 中不起作用。

我正在寻找一种适用于 ie IN quirks mode的纯 javascript 替代方案。

我试过了：

function letterwidth () {
    var a = document.querySelectorAll ('div.alphabet');
    for (var i = 0, b = a.length; i < b; i++){
        if (i % 2 == 0) {
            a[i].style.width = '30px';
        }
    }
}

但我收到一个错误：

SCRIPT438：对象不支持属性或方法“querySelectorAll”

Answer 1

如果querySelector浏览器不支持，则需要使用常规的 DOM 遍历方法：

var el  = [],
    div = document.getElementsByTagName('div');

for (var i=0; i<div.length; i++) {
    if (div[i].className.indexOf('alphabet') != -1) 
        el.push(div[i]);
}

for (var i=0; i<el.length; i++){
    if (i % 2 == 0)
         el[i].style.width = '30px';
}

小提琴

Answer 2

我假设您使用的是旧版本的 Internet Explorer，它不支持document.querySelectorAll

可以使用的浏览器querySelectorAll。

Answer 3

Object doesn't support property or method 'querySelectorAll'

过时的浏览器。

jQuery 是纯 JavaScript。因此，除非您想自己重写选择器解析器以最终获得类似于 jQuery 的解析器，否则我建议您直接使用它。