모든 브라우저에서 JavaScript를 사용하여 스타일 태그를 안정적으로 삽입하려면 어떻게 해야 합니까?

JavaScript로 스타일 태그 삽입: 세련된 접근 방식

제시된 초기 방법은 특정 브라우저에서 목표를 달성할 수 있지만, 한계와 미적 문제. 이러한 장애물을 극복하려면 광범위한 브라우저 호환성과 우아함을 포괄하는 다음과 같은 세련된 접근 방식을 고려하십시오.

스타일 요소 생성

JavaScript로 스타일 태그를 생성하는 핵심은 거짓말입니다. 본문이 아닌 HTML 문서의 머리 부분에 추가합니다. 이렇게 하면 주요 브라우저에서 일관된 동작을 보장할 수 있습니다.

var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
head.appendChild(style);

스타일 속성 설정

스타일 규칙을 지정하려면 다음의 유형 속성을 설정할 수 있습니다. 스타일 요소를 'text/css'로 설정하고 cssText(IE 호환성을 위해) 또는 AppendChild를 사용하여 실제 스타일을 정의합니다. 규칙.

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

호환성 매트릭스

브라우저 호환성을 보장하려면 다음 호환성 매트릭스를 고려하세요.

Browser	Method 1	Method 2
Chrome	No	Yes
Firefox	Yes	Yes
Opera	Yes	Yes
IE7-9	No	Yes

결론

스타일 요소를 <머리> 적절한 CSS 설정 방법을 사용하면 널리 사용되는 브라우저에서 안정적이고 우아하게 작동하는 JavaScript로 스타일 태그를 생성할 수 있습니다.

위 내용은 모든 브라우저에서 JavaScript를 사용하여 스타일 태그를 안정적으로 삽입하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!