동적 스타일 클래스 캡슐화 JS code_javascript 기술

WBOY
풀어 주다: 2016-05-16 18:47:14
원래의
1214명이 탐색했습니다.

파일명 StyleSheet.js

코드 복사 코드는 다음과 같습니다.

// CssRule 클래스는 StyleSheet에서 제공됩니다. getRule 메소드는
function CssRule(rule) {
this.rule = rule;
this.style = rule.style; = rule.selectorText;
this.index = null;
}
function StyleSheet() {
var head = document.getElementsByTagName("head")[0]//Create 새 태그를 생성하여 새 스타일
/*
Document.createStyleSheet는 FF
CSS 파일을 가져오지 않으면 document.createStyleSheet 메소드가 실패하므로 여기서는 사용되지 않습니다.
*/
var style = document.createElement("style");
style.type = "text/css";
head.appendChild(style)
this.CatchStyle(document.styleSheets.length - 1);
}
StyleSheet.prototype = {
//기존 스타일을 직접 캡처할 수 있음
CatchStyle: function(index) {
this.style = document.styleSheets[index]
if (navigator.userAgent.indexOf("MSIE") < 0) { //IE가 아닌 브라우저 패치
this.style.addRule = function(selector, style) {
var index = this.cssRules.length ;
this.insertRule(selector "{" style "}", index);
this.style.removeRule = function(index) {
this.deleteRule(index); 🎜>} ;
}
},
//스타일 추가
AddRule: function(selector, style) {
this.style.addRule(selector, style)
} ,
//스타일 제거
RemoveRule: function(index) {
this.style.removeRule(index);
},
//모든 스타일 가져오기
getRules: function( ) {
if (this.style.rules) { //IE
return this.style.rules
}
return this.style.cssRules //IE가 아님
} ,
//선택기를 통해 스타일 가져오기
getRule: function(selector) {
var rule = this.getRules()
for (var i = 0; i < rule.length ; i ) {
var r = rule[i];
if (r.selectorText == selector) {
var rule = new CssRule(r)
rule.index; 🎜>return rule;
}
}
return null;
}
}


샘플 코드 호출



코드 복사

>
스타일

a
b

c

d
;
< ;div class="test">e



원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!