如何使用 aria-expanded="true" 更改 CSS 属性

Question

我想使用 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" 时。

原文由 fraser dale 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当你可以只使用 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>

原文由 Sergio Tx 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 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');

希望这可以帮助。

原文由 Zakaria Acharki 发布，翻译遵循 CC BY-SA 3.0 许可协议