jQuery를 사용하여 cs ":After" 선택기에 액세스합니다.

jQuery를 사용하여 cs ":After" 선택기에 액세스합니다.

이 질문에는 이미 다음과 같은 답변이 있습니다.

javascript (또는 jQuery) 사용 후 :::before, :::: 등 CSS 유사 요소 선택 및 조작 (28개 답변)

닫힘8년 전에.

나는 다음과 같은 CSS를 가지고 있습니다.

.pageMenu .active::after {
    content: '';
    margin-top: -6px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 14px solid white;
    border-left: 14px solid transparent;
    border-bottom: 14px solid white;
    position: absolute;
    right: 0;
}

저는 jQuery를 이용하여 상단, 왼쪽, 하단 테두리의 테두리 폭을 변경하고 싶습니다.이 요소에 액세스하려면 어떤 선택기를 사용해야 합니까?다음을 시도해 보았지만 작동이 되지 않는 것 같습니다.

$('.pageMenu .active:after').css(
        {
            'border-top-width': '22px',
            'border-left-width': '22px',
            'border-right-width': '22px'
        }
    )

당신은 조작할 수 없습니다.:after, 기술적으로 DOM의 일부가 아니기 때문에 어떠한 자바스크립트로도 접근할 수 없기 때문입니다.그러나 당신은 새로운 클래스를 새로운 클래스로 추가할 수 있습니다.:after명시된.

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

$('.pageMenu .active').toggleClass('changed');

---

업데이트: 직접 수정하는 것은 불가능합니다.:after컨텐츠, 자바스크립트를 사용하여 읽기 및/또는 재정의하는 방법이 있습니다.포괄적인 기법 목록은 "jQuery를 사용한 CSS 의사 요소 조작(예::이전 및:후)"을 참조하십시오.

like html 코드 뒤에 :의 스타일을 추가할 수 있습니다.
예를 들어,

var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');

jQuery built-in을after()빈 값을 사용하면 당신의 것과 일치하는 동적 객체가 생성됩니다.:afterCSS 셀렉터.

$('.active').after().click(function () {
    alert('clickable!');
});

jQuery 설명서를 참조합니다.

언급URL : https://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery