JavaScript로 의사 클래스 스타일을 수정하는 방법

우리는 모두 CSS 의사 클래스에 대해 들어봤지만 JavaScript에도 의사 클래스가 있다는 사실은 알지 못했습니다. 프로젝트에서 종종 JavaScript를 사용하여 의사 요소(:before,:after)의 스타일을 동적으로 제어해야 하지만 우리 모두는 알고 있습니다. JavaScript 또는 jQuery에는 의사 클래스 선택기가 없습니다. 다음은 몇 가지 일반적인 방법을 요약한 것입니다.

HTML

<p class="red">Hi, this is a plain-old, sad-looking paragraph 
tag.</p>
CSS
.red::before {
content: &#39;red&#39;;
color: red;
}

방법 1

JavaScript 또는 jQuery를 사용하여

요소의 클래스 이름을 전환하고 스타일을 수정합니다.

.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');

방법 2

기존

document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);

방법 3

JavaScript 또는 jQuery를 사용하여 새 스타일 시트를 만들고

에 삽입합니다.

// Create a new style tag
var style = document.createElement("style");
// Append the style tag to head
document.head.appendChild(style);
// Grab the stylesheet object
sheet = style.sheet
// Use addRule or insertRule to inject styles
sheet.addRule('.red::before','color: green');
sheet.insertRule('.red::before { color: green }', 0);

jQuery

$(&#39;<style>.red::before{color:green}</style>&#39;).appendTo(&#39;head&#39;);

방법 4

HTML5 데이터 속성을 사용하고 attr( ) 속성에서 동적으로 수정합니다.

<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
content: attr(data-attr);
color: red;
}
$(&#39;.red&#39;).attr(&#39;data-attr&#39;, &#39;green&#39;);

위는 JavaScript를 사용하여 의사 클래스 스타일을 수정하는 방법에 대해 우리가 컴파일한 네 가지 방법입니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

관련 권장 사항:

CSS3 의사 클래스를 사용하여 3D 버튼을 만드는 방법에 대한 분석 예

CSS에서 포커스 의사 클래스 사용 예에 ​​대한 자세한 설명

가상 클래스 선택기 요약

위 내용은 JavaScript로 의사 클래스 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!