Chrome 확장 프로그램용 JavaScript에 CSS 스타일시트를 문자열로 삽입하는 방법은 무엇입니까?

CSS 스타일시트를 JavaScript의 문자열로 삽입

Chrome 확장 프로그램의 인터페이스에 맞춤 CSS 스타일을 추가하려면 document.stylesheets 문제에 직면하게 됩니다. JavaScript 문자열을 사용하여 완전한 스타일시트를 삽입하는 방법은 다음과 같습니다.

스타일 요소 생성 및 추가:

가장 간단한 해결 방법은

<code class="javascript">const style = document.createElement('style');
style.textContent = 'body { color: red; }';
document.head.append(style);</code>

다중 CSS 주입:

원하는 경우 한 패스에 여러 스타일을 삽입하려면 위 코드를 유틸리티 함수로 래핑할 수 있습니다.

<code class="javascript">function addStyle(styleString) {
  const style = document.createElement('style');
  style.textContent = styleString;
  document.head.append(style);
}</code>

대체 가능한 CSS 삽입:

또는 이전 CSS 삽입을 덮어쓰는 기능:

<code class="javascript">const addStyle = (() => {
  const style = document.createElement('style');
  document.head.append(style);
  return (styleString) => (style.textContent = styleString);
})();</code>

IE 제한:

IE9 이하는 스타일시트가 32개로 제한되는 반면 IE10은 4095개를 허용합니다. 주의하세요. 이전 브라우저에서 대체할 수 없는 코드를 사용할 때.

대답 현대화:

최근 업데이트에서는 보안상의 이유로 .innerHTML을 .textContent로 대체했습니다. 업데이트된 코드:

<code class="javascript">const style = document.createElement('style');
style.textContent = styleString;
document.head.append(style);</code>

위 내용은 Chrome 확장 프로그램용 JavaScript에 CSS 스타일시트를 문자열로 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!