<스타일> 만들기 우아함과 호환성을 갖춘 태그 웹 개발 세계에서는 JavaScript를 사용하여 HTML 요소를 동적으로 생성하는 기능이 중요합니다. 그러한 요소 중 하나는 웹사이트의 모양과 표현을 제어할 수 있는 태그입니다. 그러나 여러 브라우저에서 원활하게 작동하는 솔루션을 찾는 것은 어려울 수 있습니다.</p> <p><strong>작업 접근</strong></p> <p><스타일> 다음 기준을 준수하는 방식으로 JavaScript로 태그를 지정하세요.</p> <ul> <li> <strong>미적으로 만족스럽습니다</strong>: 방해가 되거나 불필요한 HTML 마크업을 도입하지 않습니다.</li> <li> <strong>Chrome 호환성 </strong>: 솔루션이 오류 없이 작동하는지 확인합니다. Chrome.</li> </ul> <p><strong>최적의 솔루션</strong></p> <p>이상적인 접근 방식은 <style> 페이지의 <head> <body>보다는요. 이 접근 방식은 동작의 일관성을 제공하고 브라우저 관련 문제를 방지합니다.</p> <p><strong>코드 데모</strong></p> <p>다음은 최적의 솔루션을 보여주는 JavaScript 스니펫입니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>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)); }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 솔루션은 보장:</p> <ul> <li> <strong>깔끔하고 우아한 코드</strong>: 추가 HTML 마크업을 추가할 필요가 없습니다.</li> <li> <strong>크로스 브라우저 호환성</strong>: 테스트 결과 IE(7-9), Firefox, Opera 및 Windows에서 완벽하게 작동하는 것으로 확인되었습니다. 크롬.</li> </ul>
