CSS 스타일시트를 JavaScript의 문자열로 삽입 Chrome 확장 프로그램의 인터페이스에 맞춤 CSS 스타일을 추가하려면 document.stylesheets 문제에 직면하게 됩니다. JavaScript 문자열을 사용하여 완전한 스타일시트를 삽입하는 방법은 다음과 같습니다. 스타일 요소 생성 및 추가: 가장 간단한 해결 방법은 요소의 textContent 속성을 CSS 문자열로 설정하고 이를 문서의 <head>에 추가합니다:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">const style = document.createElement('style'); style.textContent = 'body { color: red; }'; document.head.append(style);</code></pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>다중 CSS 주입:</strong></p> <p>원하는 경우 한 패스에 여러 스타일을 삽입하려면 위 코드를 유틸리티 함수로 래핑할 수 있습니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">function addStyle(styleString) { const style = document.createElement('style'); style.textContent = styleString; document.head.append(style); }</code></pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>대체 가능한 CSS 삽입:</strong></p> <p>또는 이전 CSS 삽입을 덮어쓰는 기능:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">const addStyle = (() => { const style = document.createElement('style'); document.head.append(style); return (styleString) => (style.textContent = styleString); })();</code></pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>IE 제한:</strong></p> <p>IE9 이하는 스타일시트가 32개로 제한되는 반면 IE10은 4095개를 허용합니다. 주의하세요. 이전 브라우저에서 대체할 수 없는 코드를 사용할 때.</p> <p><strong>대답 현대화:</strong></p> <p>최근 업데이트에서는 보안상의 이유로 .innerHTML을 .textContent로 대체했습니다. 업데이트된 코드:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><code class="javascript">const style = document.createElement('style'); style.textContent = styleString; document.head.append(style);</code></pre><div class="contentsignin">로그인 후 복사</div></div>
