의사 elements_javascript 기술 전후에 js 효과를 설정하는 방법
- WBOY원래의
- 2016-05-16 15:27:471634검색
CSS(Cascading Style Sheets)의 주요 목적은 HTML 요소에 스타일을 추가하는 것입니다. 그러나 경우에 따라 문서에 추가 요소를 추가하는 것이 중복되거나 불가능합니다. 실제로 CSS에는 문서 자체를 방해하지 않고 추가 요소를 추가할 수 있는 기능, 즉 "의사 요소"가 있습니다.
이전 단어
의사 요소 전후에 js 효과를 직접 설정할 수 없습니다
예
이제 (ID가 상자이고 콘텐츠가 "I am test content"인 div가 있는 div 앞에 콘텐츠가 "접두사"이고 색상이 빨간색 의사 클래스임)을 추가해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">我是测试内容</div> <script> var oBox = document.getElementById('box'); </script>
</body>
</html>
솔루션
[방법 1] CSS 스타일을 동적으로 삽입
IE8 브라우저는 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 특수 노드로 취급하며 하위 노드에 대한 액세스를 허용하지 않습니다. IE10 - 브라우저는 styleSheet.cssText 속성을 사용하여 스타일을 설정할 수 있도록 지원합니다. 호환 가능한 작성 방법은 다음과 같습니다.
<script>
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
loadStyleString("#box:before{content:'前缀';color: red;}");
<script>
[방법 2] 자체 의사 클래스를 사용하여 클래스 이름 추가
<style>
.change:before{content: "前缀";color: red;}
</style>
<script>
oBox.className = 'change';
</script>
[단점] 이 방법은 의사 요소의 content 속성 값을 제어할 수 없습니다.
[방법 3] setAttribute를 활용해 맞춤형 콘텐츠 구현
<style>
.change:before{content: attr(data-beforeData);color: red;}
</style>
<script>
oBox.setAttribute('data-beforeData','前缀');
</script>
[참고] 이 메서드는 setAttribute로만 구현할 수 있습니다. 테스트 후에는 데이터 세트 메서드가 유효하지 않습니다.
【방법 4】스타일 시트 추가
Firefox 브라우저는 addRule() 메소드를 지원하지 않으며, IE8 브라우저는 insertRule() 메소드를 지원하지 않습니다. 호환 가능한 작성 방법은 다음과 같습니다.
<script>
function insertRule(sheet,ruleKey,ruleValue,index){
return sheet.insertRule ? sheet.insertRule(ruleKey+ '{' + ruleValue + '}',index) : sheet.addRule(ruleKey,ruleValue,index);
}
insertRule(document.styleSheets[0],'#box:before','content:"前缀";color: red;',0)
</script>
[단점] 이 방법에는 내부 c9ccee2e6ea535a969eb3f532ad9fe89이 있거나 2cdf5bf648cf2f33323966d7f58a7f3f를 사용하여 외부 스타일을 연결해야 합니다. 그렇지 않은 경우 document.styleSheets는 빈 목록이 되며 오류가 발생합니다. 신고
[방법 5] 스타일시트 수정
먼저 방법 4를 사용하여 빈 스타일 시트를 추가한 다음 새로 생성된 c9ccee2e6ea535a969eb3f532ad9fe89을 가져오고 해당 innerHTML 속성을 사용하여 스타일 시트를 수정합니다.
<script>
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
loadStyleString('');
document.head.getElementsByTagName('style')[1].innerHTML = "#oBox:before{color: " + colorValue + ";}";
</script>
[참고] getElementsByTagName('style')[1] 메소드만 사용할 수 있습니다. 테스트 후에는 stylesheets[1] 메소드가 유효하지 않습니다.
데모
d73f29521cb3fd8c4ac60c6287997c82 아래에서 해당 속성 값을 클릭하여 데모를 수행하세요
