2012-01-23 3 views
9

CSS에 정의 된 en 요소의 위치가 동적으로 변경되었습니다 (:after). 나는 이런 식으로 변경하려고 :jQuery 및 유사 요소

$(function(){ 
    $('div::after').css({'top':'20px'}) 
}) 

을하지만 그것은 작동하지 않습니다. 위치를 바꿀 수있는 방법이 있습니까?

답변

15

수 없습니다. :after 또는 :before으로 만든 콘텐츠는 DOM의 일부가 아니므로 선택하거나 수정할 수 없습니다.

example fiddle을보고 Firebug 또는 유사한 방식으로 DOM을 검사하면 pseudo-element가 DOM 트리에 존재하지 않음을 알 수 있습니다.

잠재적 인 솔루션을 변경하려는 요소에 클래스를 적용하는 것, 그리고 CSS에서 적절하게 그 클래스의 스타일을 :

$("div").addClass("newClass"); 

this fiddle for an example를 참조하십시오.

1

추가 CSS :

p.special:before { 
    content: "bar"; 
    position: absolute; 
    top : 10px; 
} 

위 넣어 된 코드 페이지의 첫 번째 하나 인 스타일 시트 가정이 그것을 변경하는 데 사용할 :

document.styleSheets[0].addRule('p.special:before','top: 15px;');