Je veux utiliser aria-extended = "true" pour changer une propriété css

Question

Je veux utiliser aria-expanded="true" pour changer une propriété css comme une classe active:

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

Je veux le <a> à background-color: #42DCA3 mais seulement quand aria-expanded="true" .

Answer 1

Pourquoi javascript alors que vous pouvez utiliser simplement CSS?

 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

Si vous étiez ouvert à l'utilisation de JQuery, vous pouvez modifier la couleur d'arrière-plan de tout lien dont la propriété aria-expanded définie sur true en procédant comme suit ...

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

Selon le degré de précision que vous souhaitez avoir concernant les liens auxquels cela s'applique, vous devrez peut-être modifier légèrement votre sélecteur.

Answer 4

Vous pouvez utiliser querySelector() avec l'attribut sélecteur '[attribute="value"]', atteinte à la règle css à l'aide .style, comme vous pouvez le voir dans l'exemple ci-dessous:

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 :

Si vous souhaitez utiliser jQuery solution que vous pouvez simplement utiliser css() méthode :

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

Espérons que cette aide.