JavaScript는 동적으로 생성된 CSS 스타일 규칙 구성표_javascript 기술을 구현합니다.

현재 웹 애플리케이션에는 많은 JavaScript 코드가 있으며, 우리는 이를 더 빠르게 만들기 위해 항상 다양한 솔루션을 찾고 있습니다.

1. 보다 효율적인 이벤트 모니터링을 위해 이벤트 위임을 사용합니다.
2. 함수 디바운싱 기술을 사용하여 특정 메소드가 일정 시간 내에 호출되는 횟수를 제한합니다. 이벤트 함수의 고주파수 트리거를 방지하는 방법(중국어 번역) )
3. JavaScript 로더를 사용하여 실제로 필요한 리소스 등을 로드합니다.

페이지를 더 빠르고 효율적으로 만드는 또 다른 방법은 DOM 요소를 지속적으로 쿼리하고 다양한 스타일을 적용하는 대신 JS를 통해 직접 스타일 시트의 특정 스타일을 동적으로 추가하고 삭제하는 것입니다. 작동 방식은 다음과 같습니다.

스타일 시트 가져오기

스타일 시트를 선택하여 스타일 규칙을 추가할 수 있습니다. 특정 스타일 시트가 있는 경우 HTML 페이지의 또는

/*
반환 값은 다음과 유사합니다.

스타일 시트 목록
{
0: CSSStyleSheet,
1: CSSStyleSheet,
2: CSSStyleSheet,
3: CSSStyleSheet,
4: CSSStyleSheet,
길이: 5,
항목: 기능
}
*/

// 미디어 속성에 관계없이 첫 번째 시트 가져오기
var sheet = document.styleSheets[0];

특별한 주의가 필요한 것은 스타일 시트의 미디어 속성입니다. 이를 화면에 표시하려는 경우 인쇄 스타일 시트에 CSS 규칙을 추가할 수 없습니다. CSSStyleSheet 개체의 속성 정보를 자세히 살펴볼 수 있습니다.

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

//콘솔은 첫 번째 스타일 시트의 정보를 출력합니다
console.log(document.styleSheets[0]);

/*
반환 값:

CSS스타일시트
cssRules: CSSRuleList[객체]
비활성화됨: 거짓
href: "http://davidwalsh.name/somesheet.css"
미디어: MediaList[객체]
ownerNode: 링크[객체]
ownerRule: null
parentStyleSheet: null
규칙: CSSRuleList[객체]
제목: null
유형: "텍스트/css"
*/

// 미디어 유형 가져오기(미디어 유형)
console.log(document.styleSheets[0].media.mediaText)
/*
반환 값은 다음과 같습니다.
이 스타일 시트에 적용된 "모두", "인쇄" 또는 기타 미디어
*/

각 경우에 규칙을 추가할 스타일시트를 얻을 수 있는 방법이 분명히 있습니다.

새 스타일 시트 만들기

대부분의 경우 가장 좋은 접근 방식은 이러한 동적 규칙을 유지하는 새로운

// 미디어(/미디어 쿼리, 미디어 쿼리) 속성을 추가할 수 있습니다
// style.setAttribute("media", "screen")
// style.setAttribute("media", "화면 및 (최대 너비: 1024px)")

// WebKit 해킹 :(
Style.appendChild(document.createTextNode(""));

// 페이지에

스타일.시트 반환;
})();

비극적인 점은 WebKit을 올바르게 생성하려면 약간의 해킹이 필요하지만 우리는 이 시트만 신경 쓰면 된다는 것입니다.

규칙 삽입

스타일시트의 insertRule 메소드는 이전 버전의 IE에서는 사용할 수 없었지만 현재는 규칙 삽입의 표준입니다. insertRule 메소드를 사용하려면 스타일 시트와 동일한 전체 CSS 규칙을 작성해야 합니다.

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

sheet.insertRule("header { float: left; 불투명도: 0.8; }", 1);

이 JavaScript API 메소드는 다소 투박해 보이지만 실제로는 다음과 같이 작동합니다. 두 번째 매개변수 인덱스는 규칙이 삽입될 위치(인덱스)를 나타냅니다. 이는 동일한 규칙/코드를 삽입하여 후속 규칙을 적용할 수 있다는 점에서도 매우 유용합니다. 기본 인덱스는 전체 컬렉션의 끝을 나타내는 -1입니다. 추가/지연 제어 규칙을 원하는 경우 규칙 뒤에 !important 태그를 추가하여 색인 문제를 방지할 수도 있습니다.

규칙 추가 - 비표준 addRule 메소드

CSSStyleSheet 객체에는 CSS 규칙을 스타일 시트에 등록할 수 있는 addRule 메소드가 있습니다. addRule 메소드는 세 개의 매개변수를 허용합니다. 첫 번째 매개변수는 선택기이고, 두 번째 매개변수는 CSS 규칙 코드이며, 세 번째 매개변수는 0부터 시작하는 정수 인덱스로, (동일한 선택기에서) 스타일의 위치를 ​​나타냅니다.

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

sheet.addRule("#myList li", "float: 왼쪽; 배경: 빨간색 !important;", 1);

addRule 메소드의 반환 값은 항상 -1이므로 이 값은 실질적인 의미가 없습니다.
이 접근 방식의 장점은 페이지에서 추가된 요소에 스타일이 자동으로 적용된다는 것입니다. 즉, 해당 요소를 특정 요소에 추가할 필요 없이 페이지에 직접 삽입한다는 의미입니다. 물론 그게 더 효율적이죠!

안전한 신청 규칙

모든 브라우저가 insertRule 메소드를 지원하는 것은 아니므로 규칙 적용을 처리하는 래퍼 함수를 ​​생성하는 것이 가장 좋습니다. 다음은 빠른 해킹 방법입니다.

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

함수 addCSSRule(시트, 선택기, 규칙, 인덱스) {
If(시트에 "insertRule") {
         sheet.insertRule(selector "{" rule "}", index);
}
else if(시트의 "addRule") {
         sheet.addRule(선택기, 규칙, 색인);
}
}

//사용방법
addCSSRule(document.styleSheets[0], "header", "float: left");

이 도구 방법은 새로운 스타일 규칙이 추가되는 모든 상황을 포괄해야 합니다. 애플리케이션의 오류가 우려되는 경우 try{} catch(e){} 블록에 메서드 코드를 래핑해야 합니다.

미디어 쿼리 규칙 삽입

미디어 쿼리 규칙을 추가하는 방법에는 두 가지가 있습니다. 첫 번째는 표준 insertRule 메소드를 사용하는 것입니다:

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

sheet.insertRule(
"@미디어 전용 화면 및 (최대 너비: 1140px) { 헤더 { 디스플레이: 없음; } }"
);

물론 이전 버전의 IE는 insertRule을 지원하지 않기 때문에 또 다른 방법은 STYLE 요소를 생성하고 적절한 미디어 속성을 지정한 다음 새 스타일 시트에 스타일을 추가하는 것입니다. 이를 위해서는 여러 STYLE 요소를 사용해야 할 수도 있지만 쉽습니다. 객체를 생성하고, 미디어 쿼리와 인덱스를 지정하고, 그런 식으로 생성/가져올 수 있습니다.

스타일 시트에 규칙을 동적으로 추가하는 것은 효율적인 방법이며 생각보다 간단할 수 있습니다. 다음 대형 앱에서는 이 접근 방식을 염두에 두십시오. 이렇게 하면 코드 및 요소 처리 측면에서 함정에 빠지는 것을 방지할 수 있습니다.