동적으로 스타일 규칙을 추가하는 방법에 대해 다시 이야기해 보겠습니다.

나는 하나의 블로그 게시물에 유용한 기능을 제공하곤 했고 , 그것은 내 블로그의 여러 게시물에서 널리 사용되었습니다. 최근에 책을 많이 읽고 있어서 새로 배운 내용을 정리하기 위해 이 블로그 게시물을 썼습니다.

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

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

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

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

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

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

스타일 규칙 객체(CSSStyleRule 객체)는 스타일을 좀 더 세부적으로 설정하기 위해 W3C에서 개발한 것입니다. 예를 들어 다음과 같은 것이 스타일 규칙 객체에 해당합니다.

버튼[유형] {
패딩:4px 10px 4px 7px;
줄 높이: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에서는 문제가 있어서 기본적으로 사용하지 않습니다.