a : before 의사 선택기에서 스타일 속성 "content"에 액세스

페이지에 약 250 개의 글꼴 아이콘이 있으며 각 아이콘의 유니 코드 값을 프로그래밍 방식으로 추출하고 싶습니다.a : before 의사 선택기에서 스타일 속성 "content"에 액세스

전형적인 아이콘은 다음과 같이 CSS를 해당했습니다

지금까지 시도했습니다 무엇

.icon-play:before { 
    content: "\f04b"; 
}

...

document.querySelectorAll('[class^=icon-]')이 아이콘에 액세스하는 (지금은 각각 i 전화). i.style을 사용하여 스타일 객체에 액세스하려고합니다. 문제는 i.style.content 값이 비어 있다는 것입니다.

나는이 방법으로 콘텐츠에 액세스하려했으나 document.querySelectorAll('[class^=icon-]:before')하지만이 결과는 비어 있습니다.

도움을 주시면 감사하겠습니다. 감사. 여기

출처

2013-04-24 Rick Viscomi

[CSS 조작 : before 및 : after 의사 요소를 jQuery로 사용] 가능한 복제본 (http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-after-pseudo-elements-using-jquery) – cimmanon

"duplicate"는 분명히 CSS 조작에 대해 묻고 있습니다. 이 질문은 CSS 읽기에 대해 묻습니다. 그럼에도 불구하고 동일한 대답을 가질 수는 있지만 두 가지 의문스러운 질문이있을 수 있습니다. –

psuedo-elements (': hover',': before' 등)는 DOM에 실제로 존재하지 않기 때문에 일반적인 선택기 쿼리를 사용하여 선택할 수 없다고 생각합니다. 나는 당신이 시도하고있는 것을 성취 할 수있는 유일한 방법은 렌더링 된 페이지가 아니라 스타일 시트 자체를 읽는 것에서 접근하는 것이라고 믿습니다. 여기에 대한 답을 설명해 드리겠습니다. http://stackoverflow.com/a/5830517/188221 – DigTheDoug

당신은 갈 :

는 지금까지 유니 코드 값을 추출하는 등의

(시각적으로 결과를 표시하기 위해 일부 추가 복잡성)

var is = document.querySelectorAll('[class^=icon-]'); 
[].forEach.call(is, function (i) { 
    console.log(
     window.getComputedStyle(i, ':before').content.slice(1, -1) // Strip off surrounding quotes 
    ); 
});

JSFiddle, 당신이 원하는 형식을 지정하지 않은 (문자열 내용을 가져 오는 것을 의미하는 것이 아니라면), 코드 포인트가 필요하면 위의 문자열의 각 문자에 charCodeAt()을 적용하여 코드 포인트를 찾고 원하는대로 처리 할 수 있습니다.

출처

2014-03-08 01:28:45

a : before 의사 선택기에서 스타일 속성 "content"에 액세스

답변

관련 문제