使用CSS分配角色，而不是将其添加到HTML标记中

Question

是否可以为具有给定类的所有元素分配角色？我想把这个：

<div class="a" role="button">Text!</div>
<div class="a" role="button">More text!</div>

进入这个

<div class="a">Text!</div>
<div class="a">More text!</div>
<style>
.a { 
role: button
}
</style>

我已经找到了在css中按角色过滤的解决方案，但没有找到使用css为元素分配角色的解决方案。

Answer 1

let buts = document.getElementsByClassName("a");
for(let i = 0; i < buts.length; i++){
buts[i].setAttribute("role", "button");
}

<div class="a">Text!</div>
<div class="a">More text!</div>

Answer 2

您可以通过forEach((方法用纯JavaScript实现。

document.querySelectorAll(".a").forEach(function(role){
role.setAttribute('role', 'button');  
});

<div class="a">Text!</div>
<div class="a">Text #2</div>
<div class="a">More text!</div>