Question

我有这段代码：

<div class="changingClass"></div>
<div class="someClass"></div>
<div class="changingClass"></div>

对于具有“changingClass”类的div，我想添加一个属性：

<div class="changingClass" myAttr="added attribute"></div>

如何使用javascript执行此操作？

Answer 1

以下内容对您有用：

var elems = document.getElementsByClassName('changingClass');
for (i=0;i<elems.length;i++){
    elems[i].setAttribute('data-myAttr') = 'addedAttribute';
}

请注意，这会找到并使用className'changingClass'迭代所有元素，然后添加data-myAttr属性，并将其设置为addedAttribute。我使用data-myAttr来符合html5用户定义的data-属性（应该允许页面具有有效的DOM结构）。

我已经将上面的代码修改为更符合标准（Chromium 14，Opera 11.50和Firefox 7都在Ubuntu 11.04上）：

var elems = document.getElementsByClassName('changingClass'), myAttr;

for (i=0;i<elems.length;i++){
    myAttr = document.createAttribute('data-myAttr');
    myAttr.nodeValue = 'addedAttribute';
    elems[i].setAttributeNode(myAttr);

}

JS Fiddle demo，请注意，此演示中的css似乎只适用于Firefox和Opera，不是 Chromium。

Answer 2

使用jQuery ......

$('.changingClass').attr('myAttr', 'added attribute');

Answer 3

var divs = document.getElementsByClassName( "changingClass" );
for ( var i = 0; i < divs.length; i++ ) {
    divs[i].setAttribute( "myAttr", "added attribute" );
    // Another option: divs[i].myAttr = "added attribute";
}

您可以使用setAttribute方法。但是，所有浏览器都不支持getElementsByClassName选择器 - IE。您可以创建自己的className selector，也可以使用jQuery等框架，如果您需要完整的浏览器支持。

更改某些类标签的属性？

3 个答案: