jQuery를 사용하여 CSS `:before` 선택기의 너비를 동적으로 조정하는 방법은 무엇입니까?

jQuery를 사용하여 CSS :before 선택기의 동적 너비 조정

목표: :before CSS 선택기로 장식된 요소의 너비 속성을 수정합니다. 특히 특정 클래스 이름 뒤에 오는 경우.

시나리오: 다음 CSS를 고려하세요.

.column:before {
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column {
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

작업: 너비 속성을 변경합니다. :before 규칙 없이 요소에 영향을 주지 않고 jQuery를 사용하여 .column 클래스와 연결된 :before 선택기.

해결책:

주어진 답변에서 언급했듯이 jQuery 기본적으로 의사 클래스 규칙의 직접 수정을 지원하지 않습니다. 그러나 문서 헤드에 새 스타일 요소를 동적으로 추가하면 이러한 제한을 피할 수 있습니다.

$('head').append('<style>.column:before {width: 800px !important;}</style>');

이렇게 하면 .column 클래스 내의 :before 선택기에 800px의 고정 너비가 할당됩니다. !important 선언은 기존 스타일을 재정의합니다.

또는 CSS 의사 클래스 규칙을 수정하기 위해 특별히 설계된 플러그인을 사용할 수도 있습니다. 특정 플러그인 권장 사항을 사용할 수 없지만 "jQuery 의사 클래스 조작"에 대한 웹 검색을 통해 적합한 결과를 얻을 수 있습니다.

위 내용은 jQuery를 사용하여 CSS `:before` 선택기의 너비를 동적으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!