자바 스크립트 또는 jquery를 사용하여 psedo-element 속성을 수정하는 방법?

의사 요소 :before의 "왼쪽"특성을 수정하려고합니다. JavaScript 또는 jQuery를 사용하여 다른 요소를 수정하는 데 문제가 없지만 :before 탭에서 요소를 수정하려고 할 때 멈추는 것처럼 보입니다.자바 스크립트 또는 jquery를 사용하여 psedo-element 속성을 수정하는 방법?

예를 들어, 아래의 :before 요소의 left 속성을 200으로 설정하는 것 같습니다.

내 CSS : 자바 스크립트에서

#buttonBox { 
    position: absolute; 
    width:150px; 
    z-index:10; 
    left:298px; 
    top: 130px; 
} 

#buttonBox:before { 
    position: absolute; 
    content: ""; 
    top: -8px; 
    left: 80px; 
    margin-left: -8px; 
    border-bottom: 8px solid #ddd; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent;   
    border-top: 0; 
    border-bottom-color: #1e2227; 
}

document.getElementById("#buttonBox:before")

이 불가능 것을 설정하고, null을 얻을 수 있습니다.

jQuery를 :

$("#buttonBox:before").offset({top: -8, left: 200});

는 left 속성을 설정하는 유사하게 응답하지 않습니다.

가짜 요소의 속성을 수정하는 방법이 누락 되었습니까? 나는이 행운을 빕니다를 운이 없어요.

출처

2011-11-28 Andrew L

http://tackoverflow.com/questions/5814810/target-before-and-after-pseudo-elements-with-jquery, http://stackoverflow.com/questions/5347690/select-after-pseudo-class -element, http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery – RightSaidFred

JQuery로 의사 요소를 수정할 수 없습니다. 클래스를 사용하여 대신 CSS 속성을 조작하십시오. 예 :

#buttonBox.active:before { 
    top: -8px;   
    left: 200px; 
}

.active 클래스는 필요에 자바 스크립트를 통해 적용 할 수있다.

출처

2011-11-28 17:45:45

알아두기. followup, : before 요소는 가변 너비의 목록을 포함하는 작은 상자를 내 상자 위에 만듭니다. 나는 그 상자의 꼭대기의 중앙에 캐럿을 직접 놓기를 원했다. $ ("# origins : before") .offset ({top : -8, left : $ ("# origins") 너비()/2}와 같은 것을 사용합니다. 내가 이해하는 것처럼, 자바 스크립트 나 jquery에서 클래스를 사용하는 것은 불가능하다. 미리 설정해야 할 "왼쪽"값을 미리 알아야한다. 옳은? –

설명. 중간에 있다면 쉬운 왼쪽 : 50 %.그러나 화면 양쪽에있는 물체를 클릭하면 측면에 배치 할 수 있어야합니다. 나는 before : 요소를 꺼내 형제로 만들지 않고서는 이것을 수행 할 수 없다고 거의 결정했습니다. 도와 주셔서 감사합니다! =) –

네, 맞아요. 계산할 로직이 있다면 (측면 대 상단), 그러면 더 까다 롭습니다. 그러나 적용 할 두 개의 클래스가있을 수 있습니다 :'.top'과'.side'. 각각은': before' 요소를 수정하고 위치를 전환합니다. 이렇게하면 디스플레이가 CSS에있는 동안 로직이 Javascript에 유지됩니다. –

-1

아마도 jQuery에서 prev() 함수를 사용할 수 있습니까?

http://api.jquery.com/prev/

출처

2011-11-28 17:50:26

당신은 JS를 통해 :before 및 :after을 수정할 수 있지만, 그것은 충분히 짜증나는데 당신은 아마 안된다. 실제로하지

$('<style type="text/css">#buttonBox:before { left: 200px; top: -8px; }</style>').appendTo('head');

의사 요소 :

을 수행하려면, 당신은 새로운 스타일을 포함하는 웹 페이지의 head에 새로운 style 요소를 추가 수동으로 동일한 선택기를 사용하여 필요 할 걸요 DOM 요소 (그러므로 "의사"). 스타일 시트 추가/제거 이외에도 JavaScript가 액세스 할 수있는 방식으로 존재하지 않습니다.

출처

2011-11-28 18:15:15 zzzzBov

자바 스크립트 또는 jquery를 사용하여 psedo-element 속성을 수정하는 방법?

답변

관련 문제