如何使用 aria 扩展 = “ true”来更改 css 属性

我想使用 aria-expanded="true"来更改 css 属性，比如活动类:

<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>

我想 <a>到 background-color: #42DCA3但只有当 aria-expanded="true"。

171518 次浏览
小开

如果您愿意使用 JQuery，那么您可以通过执行以下操作来修改任何将属性 aria-expanded设置为 true 的链接的背景色..。

$("a[aria-expanded='true']").css("background-color", "#42DCA3");

根据您希望具体说明这些链接适用于哪些链接，您可能需要稍微修改您的选择器。

小开

您可以将 querySelector()与属性选择器 '[attribute="value"]'一起使用，然后使用 .style影响 css 规则，如下例所示:

document.querySelector('a[aria-expanded="true"]').style.backgroundColor = "#42DCA3";
<ul><li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> <span class="network-name">Google+ with aria expanded true</span></a>
</li>
<li>
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false"> <span class="network-name">Google+ with aria expanded false</span></a>
</li>
</ul>

JQuery 解决方案:

如果你想使用 jQuery 解决方案，你可以简单地使用 css()方法:

$('a[aria-expanded="true"]').css('background-color','#42DCA3');

希望这个能帮上忙。

小开
最佳答案

如果只用 css，为什么还要用 javascript 呢？

a[aria-expanded="true"]{
background-color: #42DCA3;
}
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
<span class="network-name">Google+</span>
</a>
</li>

小开 

li a[aria-expanded="true"] span{
color: red;
}
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
<span class="network-name">Google+</span>
</a>
</li>

li a[aria-expanded="true"]{
background: yellow;
}
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
<span class="network-name">Google+</span>
</a>
</li>


提交答案