Question

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

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

然而，由于伪兼容性问题，这不起作用。

我正在寻找适用于 IN怪癖模式的纯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：Object不支持属性或方法'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';
}

FIDDLE

Answer 2

我假设您使用的是不支持document.querySelectorAll

的旧版Internet Explorer

Browsers where you can use querySelectorAll

Answer 3

Object doesn't support property or method 'querySelectorAll'

过时的浏览器。

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

选择类的所有元素并迭代每个偶数对象（第n个子（偶数）替换）

3 个答案: