[javascript] Javascript로 <style> 태그를 만드는 방법은 무엇입니까?

<style>JavaScript를 사용하여 HTML 페이지에 태그 를 삽입하는 방법을 찾고 있습니다.

내가 지금까지 찾은 가장 좋은 방법 :

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

Firefox, Opera 및 Internet Explorer에서는 작동하지만 Chrome에서는 작동하지 않습니다. 또한 <br>IE의 앞에는 약간 추악합니다 .

누구나 <style>태그 를 만드는 방법을 알고 있습니까?

더 좋다
Chrome과 호환됩니까?

아니면

이것은 피해야 할 비표준 사항입니다.
세 가지 작동하는 브라우저가 훌륭하고 누가 Chrome을 사용합니까?

답변

대신에 style요소를 추가 head하십시오 body.

이것은 IE (7-9), Firefox, Opera 및 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));
}

답변

IE 스타일 createStyleSheet()과 addRule()메소드를 가지고 있지 않은 브라우저에 IE 스타일 과 메소드를 추가하는 스크립트는 다음과 같습니다 .

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = (function() {
        function createStyleSheet(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }

            document.getElementsByTagName('head')[0].appendChild(element);
            var sheet = document.styleSheets[document.styleSheets.length - 1];

            if(typeof sheet.addRule === 'undefined')
                sheet.addRule = addRule;

            if(typeof sheet.removeRule === 'undefined')
                sheet.removeRule = sheet.deleteRule;

            return sheet;
        }

        function addRule(selectorText, cssText, index) {
            if(typeof index === 'undefined')
                index = this.cssRules.length;

            this.insertRule(selectorText + ' {' + cssText + '}', index);
        }

        return createStyleSheet;
    })();
}

통해 외부 파일을 추가 할 수 있습니다

document.createStyleSheet('foo.css');

를 통해 규칙을 동적으로 생성

var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');

답변

style태그와 태그 를 삽입하고 싶다고 가정하고 link(외부 CSS 참조) 다음 예제와 같습니다.

<html>
 <head>
  <title>Example Page</title>
 </head>
 <body>
  <span>
   This is styled dynamically via JavaScript.
  </span>
 </body>
 <script type="text/javascript">
   var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   // browser detection (based on prototype.js)
   if(!!(window.attachEvent && !window.opera)) {
        styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
   } else {
        var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
        styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);
 </script>
</html>

또한 귀하의 질문에 귀하가 사용하고 있음을 알았습니다 innerHTML. 이것은 실제로 페이지에 데이터를 삽입하는 비표준 방법입니다. 가장 좋은 방법은 텍스트 노드를 만들어 다른 요소 노드에 추가하는 것입니다.

마지막 질문과 관련하여 일부 사람들은 귀하의 작업이 모든 브라우저에서 작동해야한다고 말하는 것을들을 것입니다. 그것은 모두 청중에 달려 있습니다. 잠재 고객 중 아무도 Chrome을 사용하지 않는 경우 걱정하지 마세요. 그러나 최대한 많은 잠재 고객에게 도달하려는 경우 모든 주요 A 급 브라우저를 지원하는 것이 가장 좋습니다

답변

<style>태그는 <head>요소 내에 있어야하며 추가 된 각 태그는 태그의 맨 아래에 추가되어야합니다 <head>.

사용 insertAdjacentHTML와하는 문서에 스타일 태그를 삽입하는 머리 태그 :

네이티브 DOM :

document.head.insertAdjacentHTML("beforeend", `<style>body{background:red}</style>`)

스 니펫 확장

jQuery :

$('<style>').text("body{background:red}").appendTo(document.head)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

스 니펫 확장

답변

작동하고 모든 브라우저와 호환되는 예제 :

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);

답변

종종 기존 규칙을 재정의해야 할 필요가 있으므로 HEAD에 새 스타일을 추가하는 것이 모든 경우에 작동하지는 않습니다.

모든 유효한 “BODY에 추가”접근 방식 을 요약 하고 사용 및 디버그 (IE8 +)가 더 편리한 이 간단한 기능을 생각해 냈습니다 .

window.injectCSS = (function(doc){
    // wrapper for all injected styles and temp el to create them
    var wrap = doc.createElement('div');
    var temp = doc.createElement('div');
    // rules like "a {color: red}" etc.
    return function (cssRules) {
        // append wrapper to the body on the first call
        if (!wrap.id) {
            wrap.id = 'injected-css';
            wrap.style.display = 'none';
            doc.body.appendChild(wrap);
        }
        // <br> for IE: http://goo.gl/vLY4x7
        temp.innerHTML = '<br><style>'+ cssRules +'</style>';
        wrap.appendChild( temp.children[1] );
    };
})(document);

데모 : codepen , jsfiddle

답변

이 객체 변수는 유형 속성과 모든 단일 id / class / element와 일치하는 하나의 간단한 전환 규칙을 사용하여 스타일 태그를 헤드 태그에 추가합니다. 콘텐츠 속성 을 수정 하고 필요한만큼 규칙을 삽입하십시오. 콘텐츠 내의 CSS 규칙 이 한 줄에 남아 있는지 확인하십시오 (또는 원하는 경우 새 줄마다 ‘탈출’).

var script = {

  type: 'text/css', style: document.createElement('style'),
  content: "* { transition: all 220ms cubic-bezier(0.390, 0.575, 0.565, 1.000); }",
  append: function() {

    this.style.type = this.type;
    this.style.appendChild(document.createTextNode(this.content));
    document.head.appendChild(this.style);

}}; script.append();