JavaScript는 의사 클래스 스타일 수정을 구현합니다.

프로젝트에서 요소의 스타일(:before,:after)을 동적으로 제어하기 위해 JavaScript를 사용해야 하는 경우가 많지만 JavaScript나 jQuery에는 의사 클래스 선택기가 없다는 것을 우리 모두 알고 있습니다. 본 글에서는 자바스크립트에서 의사 클래스 스타일을 수정하는 방법과 코드 구현 과정을 주로 소개합니다.

HTML

6f23bfb838f442699a99d538155cf763안녕하세요, 이것은 평범하고 슬프게 보이는 단락 태그입니다.94b3e26ee717c64999d7867364b1b4a3

CSS

.red::before {
content: 'red';
color: red;
}

방법 1

JavaScript 또는 jQuery를 사용하여 e388a4556c0f65e1904146cc1a846bee 요소의 클래스 이름을 전환하고 스타일을 수정합니다.

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

방법 2

기존 c9ccee2e6ea535a969eb3f532ad9fe89에 새로운 스타일을 동적으로 삽입합니다.

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

방법 3

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

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

방법 4

HTML5의 data 속성을 사용하고 속성에 attr()을 사용하여 동적으로 수정합니다.

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

관련 권장사항:

의사 클래스 선택기 요약

PHP의 의사 유형 및 의사 변수

php 함수 일반 매개변수 함수 및 의사 유형 매개변수 함수

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