aria- expanded= "true"를 사용하여 CSS 속성을 변경하는 방법

aria- expanded= "true"를 사용하여 CSS 속성을 변경하는 방법

사용하고싶습니다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".

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>

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>

당신은 사용할 수 있습니다.querySelector()속성 선택기 사용'[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 솔루션:

jQuery 솔루션을 사용하려면 간단히 사용할 수 있습니다.css()방법:

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

도움이 되길 바랍니다.

JQuery를 사용할 수 있는 경우 속성이 있는 링크의 배경색을 수정할 수 있습니다.aria-expanded다음과 같이 함으로써 사실로 설정...

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

이 링크가 적용되는 링크에 대한 구체적인 내용에 따라 선택기를 약간 수정해야 할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/39926555/how-to-use-aria-expanded-true-to-change-a-css-property