How to use aria-expanded true to change a css property

Question

I want to use aria-expanded  true  to change a css property like an active class     lt li class  active  gt      lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  true  gt           lt span class  network-name  gt Google  lt  span gt      lt  a gt   lt  li gt    I want the  lt a gt  to background-color   42DCA3 but only when aria-expanded  true

User · Answer

You could use querySelector   with attribute selector   attribute  value     then affect css rule using  style  as you can see in the example below    x000D   x000D  document querySelector  a aria-expanded  true     style backgroundColor     42DCA3   x000D   lt ul gt  lt li class  active  gt  x000D     lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  true  gt   lt span class  network-name  gt Google  with aria expanded true lt  span gt  lt  a gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  false  gt   lt span class  network-name  gt Google  with aria expanded false lt  span gt  lt  a gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    jQuery solution    If you want to use a jQuery solution you could simply use css   method       a aria-expanded  true     css  background-color    42DCA3      Hope this helps

User · Answer

x000D   x000D  li a aria-expanded  true   span  x000D      color  red  x000D    x000D   lt li class  active  gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  true  gt  x000D           lt span class  network-name  gt Google  lt  span gt  x000D       lt  a gt  x000D   lt  li gt  x000D   lt li class  active  gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  false  gt  x000D           lt span class  network-name  gt Google  lt  span gt  x000D       lt  a gt  x000D   lt  li gt  x000D   x000D   x000D     x000D   x000D  li a aria-expanded  true    x000D      background  yellow  x000D    x000D   lt li class  active  gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  true  gt  x000D           lt span class  network-name  gt Google  lt  span gt  x000D       lt  a gt  x000D   lt  li gt  x000D   lt li class  active  gt  x000D       lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  false  gt  x000D           lt span class  network-name  gt Google  lt  span gt  x000D       lt  a gt  x000D   lt  li gt  x000D   x000D   x000D

User · Answer

Why javascript when you can use just css    x000D   x000D  a aria-expanded  true    x000D    background-color   42DCA3  x000D    x000D   lt li class  active  gt  x000D      lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  true  gt   x000D          lt span class  network-name  gt Google  lt  span gt  x000D      lt  a gt  x000D   lt  li gt  x000D   lt li class  active  gt  x000D      lt a href   3a  class  btn btn-default btn-lg  data-toggle  tab  aria-expanded  false  gt   x000D          lt span class  network-name  gt Google  lt  span gt  x000D      lt  a gt  x000D   lt  li gt  x000D   x000D   x000D

User · Answer

If you were open to using JQuery  you could modify the background color for any link that has the property aria-expanded set to true by doing the following        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

[javascript] How to use aria-expanded="true" to change a css property

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css