스타일 규칙을 동적으로 추가하는 javascript에 대해 이야기해 보겠습니다. W3C check_javascript 기술

성능과 구조의 분리 원칙에 따라 새로운 스타일 시트를 직접 가져오는 것이 최선의 선택이라는 것은 의심의 여지가 없지만, 예를 들어 드래그 가능한 DIV를 만드는 경우의 관점에서 작동하지 않을 수도 있습니다. 스타일을 설정하면 원본 문서 흐름에 영향을 주지 않도록 절대 위치를 지정하고 위쪽 및 왼쪽 값을 조금씩 변경하여 이동 효과를 얻습니다. 드래그에는 초당 24프레임이라는 시간 개념이 있으므로 스타일 시트에 모든 내용을 포함하는 것은 불가능합니다. 따라서 스타일 규칙을 동적으로 생성하고 스타일 규칙을 신속하게 수정하는 것이 매우 필요합니다. W3C는 이를 위해 많은 작업을 수행했습니다. DOM2.0에서는 많은 인터페이스가 확장되었습니다.

한발 물러서서 성능과 구조의 분리는 스타일 시트 가져오기에만 국한되지 않습니다. 스타일에는 외부 스타일, 내부 스타일, 인라인 스타일의 세 가지 유형이 있습니다.

* 위에서 언급한 외부 스타일은 별도의 CSS 파일로 작성됩니다.
* 내부 스타일은 스타일 태그에 독립적으로 작성되며 일반적으로 제가 제공한 마지막 함수에 의해 생성된 스타일이 내부 스타일입니다.
* 인라인 스타일은 요소의 스타일 속성에 작성하는 스타일입니다.

새로 추가된 인터페이스는 주로 외부 스타일에 집중되어 있습니다. IE6과 같은 오만한 사람들은 인터페이스의 존재를 결코 무시하지 않습니다.

W3C 모델에서 "text/css" 유형의 링크 태그와 스타일 태그는 모두 document.styleSheets를 통해 현재 페이지의 모든 CSSStyleSheet 개체를 얻을 수 있지만 이는 A 컬렉션입니다. , 단순한 배열이 아닙니다. 각 CSSStyleSheet 객체에는 다음과 같은 속성이 있습니다.

* 유형: 항상 "text/css" 문자열을 반환합니다.
* 비활성화됨: 입력 비활성화와 동일한 효과가 있으며 기본값은 false입니다.
* href: 스타일 태그가 null인 경우 URL을 반환합니다.
* 제목: 제목의 값을 반환합니다. 제목은 일반 요소의 제목과 동일합니다. 원하는 대로 작성할 수 있습니다.
* 미디어: IE와 Firefox에서 반환되는 내용이 일관되지 않아 말씀드리기 어렵습니다. media는 자신이 소유한 스타일 규칙이 유효한 장치를 지정하는 데 사용됩니다. 기본값은 all입니다.
* ownerRule: 스타일 시트가 @import로 도입된 경우 읽기 전용 CSSRule 객체를 반환합니다.
* cssRules: 읽기 전용 스타일 규칙 개체(CSSStyleRule 개체) 컬렉션을 반환합니다.

W3C에서는 스타일을 좀 더 세부적으로 설정하기 위해 CSSStyleRule 개체를 만듭니다. 예를 들어 다음은 스타일 규칙 개체에 해당합니다.

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

button[type] {
padding:4px 10px 4px 7px
line-height:17px; ;
}

스타일 규칙 객체에는 type, cssText, parentStyleSheet, parentRule과 같은 주요 속성이 있습니다.

type은 스타일 규칙을 세분화하는 nodeType과 다소 유사합니다. 정수를 사용하여 해당 유형을 나타냅니다. 구체적인 상황은 다음과 같습니다.

* 0: CSSRule.UNKNOWN_RULE
* 1: CSSRule.STYLE_RULE(CSSStyleRule 개체 정의)
* 2: CSSRule.CHARSET_RULE(설정을 위한 CSSCharsetRule 개체 정의) 현재 스타일 시트의 문자 집합은 기본적으로 현재 웹 페이지와 동일합니다.
* 3: CSSRule.IMPORT_RULE(다른 스타일 시트를 도입하기 위해 @import를 사용하는 CSSImportRule 객체 정의)
* 4: CSSRule.MEDIA_RULE(이 스타일이 모니터, 프린터, 프로젝터 등에 사용되는지 여부를 설정하는 데 사용되는 CSSMediaRule 객체 정의)
* 5: CSSRule.FONT_FACE_RULE(CSSFontFaceRule 객체 정의, CSS3의 @font-face )
* 6: CSSRule.PAGE_RULE (CSSPageRule 객체 정의)

물론 cssText는 브라우저마다 스타일 속성의 차이를 무시하고 문자열을 스타일 규칙으로 직접 변환하는 매우 유용한 속성입니다. cssFloat 및 styleFloat와 같은 것입니다.

parentStyleSheet와 parentRule은 모두 @import용입니다. 하지만 @import는 IE에서는 문제가 있어서 기본적으로 사용하지 않습니다.

몇 가지 예상치 못한 방법이 있습니다.

* nsertRule(rule,index): 스타일 규칙을 추가합니다.
* deleteRule(index): 스타일 규칙을 제거합니다.
* getPropertyValue(propertyName) 요소의 해당 스타일 속성 값을 가져옵니다. 스타일 규칙 객체를 얻으면 CSSStyleRuleObject.getPropertyValue("color")를 사용하여 글꼴 색상 설정을 얻을 수 있습니다. 일반적인 el.style.color 메소드와 비교하면 el.style.color는 인라인 스타일을 가져오기 때문에 효율성이 상당히 높습니다. IE와 같은 괴물은 요소가 스타일 속성을 설정하지 않으면 전혀 가져올 수 없습니다. 비어 있으면 상속될 수 있습니다... 호환성 문제가 있을 수 있으며 이 인라인 속성은 반드시 요소에 궁극적으로 적용되는 스타일이 아닐 수도 있습니다. IE는 덜 쓸모 있는 el.currentStyle[prop]만 호출할 수 있으며, 다른 브라우저는 프로세서를 호출합니다. document.defaultView.getCompulatedStyle(el, "")[prop] 꽤 인상적이지만 약간 번거롭습니다.
* RemoveProperty(propertyName)는 요소의 해당 스타일 속성을 제거합니다.
* setProperty(propertyName, value, Priority)는 스타일을 추가할 요소를 설정하고 우선순위도 지정합니다.

스타일을 설정하는 함수를 얻을 수 있습니다:

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

var Hyphenize =function(name){
return name.replace( /([A-Z])/g, "-$1" ).toLowerCase()
}

var camelize = function(name){
return name.replace(/-(w)/g, function(all, letter){
return letter.toUpperCase();
});
}
var setStyle = function(el, styles) {
for(스타일의 var 속성) {
if(!styles.hasOwnProperty(property))
if(el. style.setProperty ) {
//하이픈 스타일이어야 합니다. el.style.setProperty('Background-color','red',null)
el.style.setProperty(hyphenize(property),styles [property] ,null);
} else {
//el.style.paddingLeft = "2em"
el.style[camelize(property)] = styles[와 같은 카멜 케이스 스타일이어야 합니다. 속성]
}
}
return true;
}

사용법:

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

setStyle(div,{
'left':0,
'top':0,
'line -height':'2em' ,
'padding-right':'4px'
});

하지만 저는 이 방법이 인라인 스타일을 생성하는 것을 별로 좋아하지 않습니다. , 부동 및 불투명도를 처리해야 합니다. IE7의 인라인 스타일에는 필터에 버그가 있습니다. hasLayout을 가져오도록 해야 합니다. 그렇지 않으면 필터가 적용되지 않습니다(el.currentStyle.hasLayout을 통해 상태를 확인할 수 있습니다). 따라서 하나씩 설정하는 것보다 cssText를 사용하여 모두 잡아내는 것이 좋습니다.

마지막으로 addSheet 메서드의 향상된 버전을 첨부합니다. 자동으로 불투명도를 처리하는 기능을 추가합니다. 즉, 표준에 따라 cssText만 설정하면 자동으로 해당 필터가 생성됩니다. 이를 통해 최소한 Firefox와 같은 브라우저는 W3C 검사를 통과할 수 있습니다.

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

var addSheet = function(){
var doc,cssCode;
if(arguments.length == 1){
doc = document;
cssCode = 인수[0]
}else if(arguments.length == 2){
doc = 인수[0];
cssCode = 인수[1]
}else{
alert("addSheet 함수에는 themost 두 개의 매개변수 허용!");
}
if(! "v1"){//새 기능, ​​사용자는 W3C 투명 스타일만 입력하면 자동으로 IE의 투명 필터로 변환됩니다
var t = cssCode.match(/opacity:(d?.d );/);
if(t!= null){
cssCode = cssCode.replace(t[0], "filter:alpha (opacity="parseFloat(t[1]) * 100 ");");
}
}
cssCode = cssCode "n";//방화범 확인을 용이하게 하기 위해 끝에 개행 문자를 추가합니다. .
var headElement = doc.getElementsByTagName("head")[0];
var styleElements = headElement.getElementsByTagName("style")
if(styleElements.length == 0){//if not 스타일 요소가 존재하는 경우
if(doc.createStyleSheet){ //ie
doc.createStyleSheet()
}else{
var tempStyleElement = doc.createElement('style'); // w3c
tempStyleElement.setAttribute("type", "text/css");
headElement.appendChild(tempStyleElement)
}
}
var styleElements[0];
var media = styleElement.getAttribute("media");
if(media != null && !/screen/.test(media.toLowerCase()) ){
styleElement.setAttribute("media" ," screen");
}
if(styleElement.styleSheet){ //ie
styleElement.styleSheet.cssText = cssCode;//새 내부 스타일 추가
}else if(doc.getBoxObjectFor ) {
styleElement.innerHTML = cssCode;//Firefox는 innerHTML에 직접 스타일 시트 문자열 추가를 지원합니다.
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}