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

【问题标题】：How to use aria-expanded="true" to change a css property如何使用 aria-expanded="true" 更改 CSS 属性
【发布时间】：2017-02-17 00:03:58
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：

5 年后仍然有助于节省代码行数。

【解决方案2】：

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>

【讨论】：

【解决方案3】：

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

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

根据您希望将其应用于哪些链接的具体程度，您可能需要稍微修改您的选择器。

【讨论】：

是的，没关系，我没有使用其他 aria-expanded。我会把这段代码放在哪里？就在头上。谢谢
或者实际上我如何使用它，以前从未使用过 jquery

【解决方案4】：

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

希望这会有所帮助。

【讨论】：