如何使用 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" 。

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>

Answer 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>

Answer 3

如果您願意使用 JQuery，則可以通過執行以下操作來修改將aria-expanded屬性設置為 true 的任何鏈接的背景顏色...

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

根據您希望將其應用於哪些鏈接的具體程度，您可能需要稍微修改您的選擇器。

Answer 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');

希望這會有所幫助。