Chrome 호환성을 위해 JavaScript로 생성된 스타일 태그를 어떻게 최적화할 수 있습니까?

Chrome 호환성을 위해 JavaScript 생성 스타일 태그 최적화>

JavaScript로 스타일 태그를 생성하면 웹페이지의 동적 스타일을 향상시킬 수 있습니다. 이를 달성하기 위한 여러 가지 접근 방식이 있지만 모든 방법이 브라우저 전체에서 일관되게 수행되는 것은 아닙니다. 특히 이 문서에서는 Google Chrome과의 호환성 문제를 해결하는 향상된 기술을 살펴봅니다.

innerHTML을 사용하여 divNode 내에 스타일 태그를 생성하는 초기 접근 방식은 Chrome을 제외한 브라우저 간 호환성을 나타내며 미적 문제를 발생시킵니다. 인터넷 익스플로러에서. 이 문제를 해결하기 위해 다음과 같은 수정된 방법이 제안됩니다.

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);

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

로그인 후 복사

이 수정된 방법에서는 스타일 요소가 문서 본문이 아닌 헤드에 추가됩니다. 이 수정을 통해 Chrome과의 호환성이 보장되고 Internet Explorer에서 추가 자리 표시자(
태그)가 필요하지 않습니다.

이 기술은 주요 브라우저(IE7-9, Firefox, Opera 및 Chrome)의 안정성과 효율성이 입증되었습니다.

위 내용은 Chrome 호환성을 위해 JavaScript로 생성된 스타일 태그를 어떻게 최적화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!