Javascript 我想使用 aria-expanded = "true" 来更改 css 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39926555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I want to use aria-expanded = "true" to change a css property
提问by fraser dale
I want to use aria-expanded="true"to change a css property like an active class :
我想用来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>
I want the <a>to background-color: #42DCA3but only when aria-expanded="true".
我想要的<a>，background-color: #42DCA3但只有当aria-expanded="true"。
回答by Sergio Tx
Why javascript when you can use just css?
当您只能使用 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>回答by zubair khanzada
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>回答by Tyler Roper
If you were open to using JQuery, you could modify the background color for any link that has the property aria-expandedset to true by doing the following...
如果您愿意使用 JQuery，则可以aria-expanded通过执行以下操作来修改属性设置为 true 的任何链接的背景颜色...
$("a[aria-expanded='true']").css("background-color", "#42DCA3");
Depending on how specific you want to be regarding which links this applies to, you may have to slightly modify your selector.
根据您希望将其应用于哪些链接的具体程度，您可能需要稍微修改您的选择器。
回答by Zakaria Acharki
You could use querySelector()with attribute selector '[attribute="value"]', then affect css rule using .style, as you can see in the example below:
您可以使用querySelector()with 属性选择器'[attribute="value"]'，然后使用 影响 css 规则.style，如下例所示：
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 solution :
jQuery 解决方案：
If you want to use a jQuery solution you could simply use css()method :
如果你想使用 jQuery 解决方案，你可以简单地使用css()方法：
$('a[aria-expanded="true"]').css('background-color','#42DCA3');
Hope this helps.
希望这可以帮助。
