Jak utworzyć tag <style> za pomocą Javascript?

336

Szukam sposobu na wstawienie <style>tagu na stronie HTML za pomocą JavaScript.

Najlepszy sposób, jaki do tej pory znalazłem:

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

Działa to w Firefox, Opera i Internet Explorer, ale nie w Google Chrome. Jest też trochę brzydki z <br>przodu dla IE.

Czy ktoś wie, jak stworzyć taki <style>tag

Jest milszy
Działa z Chrome?

Albo może

To jest niestandardowa rzecz, której powinienem unikać
Trzy działające przeglądarki są świetne i kto i tak używa Chrome?

javascript html css

— Ameena Sana
źródło

663

Spróbuj dodać styleelement headzamiast do body.

Zostało to przetestowane w IE (7-9), Firefox, Opera i 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));
}

— Christoph
źródło

19

FYI document.headjest obsługiwany we wszystkich głównych przeglądarkach.

— Rob W

30

@RobW - Nie jest obsługiwany w IE8 i niższych wersjach. Jest obsługiwany w nowoczesnych przeglądarkach, ale nie we wszystkich głównych.

— Tim

5

dlaczego nie po prostu użyć document.querySelector("head")? To wydarzenie obsługiwane przez IE8 według źródła

— allenhwkim

8

@allenhwkim: odpowiedź poprzedza wprowadzenie querySelector(); dziś prawdopodobnie wybrałbym z document.head, dostępny od IE9

— Christoph

2

Musiałem dołączyć element stylu do głowy przed uzyskaniem dostępu style.styleSheet.cssText. Przed dołączeniem style.styleSheetbył zerowy.

— Will Hawker,

38

Oto skrypt, który dodaje style IE createStyleSheet()i addRule()metody do przeglądarek, które ich nie mają:

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;
    })();
}

Możesz dodać pliki zewnętrzne za pośrednictwem

document.createStyleSheet('foo.css');

i dynamicznie twórz reguły poprzez

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

— Christoph
źródło

Pomogło mi to w załadowaniu zewnętrznego pliku CSS w dziwnym kontekście CMS. Miałem pewne problemy z częścią addRule / removeRule, więc po prostu je wyeliminowałem i wszystko działa dobrze.

— Kirkman14,

33

Zakładam, że chcesz wstawić styletag w porównaniu do linktagu (odwołując się do zewnętrznego CSS), więc to właśnie robi następujący przykład:

<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>

Zauważyłem też w twoim pytaniu, że używasz innerHTML. Jest to w rzeczywistości niestandardowy sposób wstawiania danych na stronę. Najlepszą praktyką jest utworzenie węzła tekstowego i dołączenie go do innego węzła elementu.

Jeśli chodzi o twoje ostatnie pytanie, usłyszysz, jak niektórzy mówią, że twoja praca powinna działać we wszystkich przeglądarkach. Wszystko zależy od odbiorców. Jeśli nikt z Twoich odbiorców nie używa Chrome, nie przejmuj się; Jeśli jednak chcesz dotrzeć do jak największej liczby odbiorców, najlepiej jest obsługiwać wszystkie główne przeglądarki klasy A.

— Tomek
źródło

1

Jest to w zasadzie to samo, co moje rozwiązanie; żadne z nich nie działa w IE!

— Christoph

Dołączenie węzła tekstowego nie działa w IE. Ale umieszczenie elementu stylu w głowie sprawia, że moje rozwiązanie działa w Chrome! :-)

1

dla IE użyjstyleNode.styleSheet.cssText = ...

— Christoph

7

(Bardzo późny komentarz) „Wszystko zależy od odbiorców. Jeśli nikt z odbiorców nie korzysta z Chrome, nie przejmuj się” Takie podejście prowadzi do zablokowania ludzi w IE6 przez lata po udostępnieniu IE7, a nawet IE8 . „Ale aplikacja internetowa, z której muszę korzystać, działa tylko w IE6”

— Stephen P

1

Tak, masz rację i niekoniecznie zalecam robienie tego (stąd całość: „jeśli chcesz dotrzeć do jak największej liczby odbiorców, najlepiej jest obsługiwać wszystkie główne przeglądarki klasy A”), ale znając publiczność na Twojej platformie jest ważna.

— Tom

31

<style>tagi powinny być miejscami wewnątrz <head>elementu, a każdy dodany tag powinien być dodany na dole <head>tagu.

Używanie insertAdjacentHTML do wstrzykiwania znacznika stylu do znacznika nagłówka dokumentu :

Natywny DOM:

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

Rozwiń fragment kodu

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>

Rozwiń fragment kodu

— vsync
źródło

Zgadzam się, jest to najlepsze i proste, ale uważaj na źle wstrzyknięty css, jeśli nie masz nad nim kontroli!

— Endless

24

Przykład, który działa i jest zgodny ze wszystkimi przeglądarkami:

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

— Belaz
źródło

7

zły element: stylenie ma rellub ma hrefatrybut - miałeś na myśli link?

— Christoph

4

co linkma wspólnego element z pytaniem? OP poprosił o styleelement. Ta odpowiedź nie ma nic wspólnego z pytaniem

— vsync,

2

@vsync stylesłuży do dodawania stylów wbudowanych, linkjest poprawny dla źródeł arkuszy stylów i ma tę zaletę, że pozwala uniknąć problemów w różnych przeglądarkach.

— majick 12.04.16

7

Często trzeba zastąpić istniejące reguły, więc dołączanie nowych stylów do HEAD nie zawsze działa.

Wymyśliłem tę prostą funkcję, która podsumowuje wszystkie niepoprawne podejścia „dołącz do BODY” i jest po prostu wygodniejsza w użyciu i debugowaniu (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);

Demo: codepen , jsfiddle

— Garlaro
źródło

Doskonale działał w najnowszym Firefoksie, Chrome i ie8 (a przynajmniej tak, jak go wpisałem). Naprawdę nie wiem, dlaczego to nie ma więcej punktów.

— Harry Pehkonen,

Nie ma to już więcej punktów, ponieważ nie jest poprawne, ani dobrą rzeczą do wstrzykiwania <style>tagu poza <head>tag. Tag stylu nie powinien pojawiać się nigdzie indziej niż w <head>tagu. To powszechnie przyjęty standard HTML. Istnieje atrybut stylu dla wbudowanego stylu, a atrybut stylu może być zastosowany do dowolnego znacznika w <body>znaczniku, w tym <body>znacznika.

— Spooky

Ten kod nie działał dla mnie. Stworzyłem trochę krótszy kod, który działa w trzech przeglądarkach i opublikuję tutaj swoją odpowiedź.

— David Spector,

Nie mogłem zrozumieć, dlaczego Chrome nie aktualizował moich stylów, gdy dynamicznie dodawałem blok stylów do głowy. Próbowałem tego i magicznie aktualizuje się. Muszę zbadać, jaka jest tutaj różnica w tym kodzie, która powoduje, że przeglądarka ponownie renderuje css. Ale wielkie dzięki!

— prograhammer

5

Ta zmienna obiektowa doda tag stylu do tagu head z atrybutem type i jedną prostą regułą przejścia wewnątrz, która pasuje do każdego identyfikatora / klasy / elementu. Możesz modyfikować właściwości treści i wprowadzać tyle reguł, ile potrzebujesz. Po prostu upewnij się, że reguły css wewnątrz zawartości pozostają w jednym wierszu (lub „uciekaj” z każdego nowego wiersza, jeśli wolisz).

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();

— Straszny
źródło

1

Podobało mi się to rozwiązanie, więc sam go użyłem do zmiany rozmiarów przycisków na urządzeniach mobilnych, ale niepoprawne jest to, że właściwość content musi znajdować się w jednym wierszu: po prostu połącz wiele ciągów (w wielu wierszach) z operatorem +.

— RufusVS,

Prawdziwe. Wiem i wiedziałem o tym. Ale czasami jestem zbyt leniwy, by pisać tak, jak powinienem. : D Na zdrowie.

— Spooky

5

Oto wariant dynamicznego dodawania klasy

function setClassStyle(class_name, css) {
  var style_sheet = document.createElement('style');
  if (style_sheet) {
    style_sheet.setAttribute('type', 'text/css');
    var cstr = '.' + class_name + ' {' + css + '}';
    var rules = document.createTextNode(cstr);
    if(style_sheet.styleSheet){// IE
      style_sheet.styleSheet.cssText = rules.nodeValue;
    } else {
      style_sheet.appendChild(rules);
    }
    var head = document.getElementsByTagName('head')[0];
    if (head) {
      head.appendChild(style_sheet);
    }
  }
}

— Michał
źródło

4

Wszystko dobrze, ale aby styleNode.cssText działał w IE6 z węzłem utworzonym przez javascipt, musisz dołączyć węzeł do dokumentu przed ustawieniem cssText;

dalsze informacje @ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx

— Tony
źródło

4

Ta funkcja wstrzykuje css za każdym razem, gdy wywołasz funkcję w appendStylenastępujący sposób:
appendStyle('css you want to inject')

Działa to poprzez wstrzyknięcie stylewęzła do nagłówka dokumentu. Jest to technika podobna do powszechnie używanej do leniwego ładowania JavaScript. Działa konsekwentnie w większości nowoczesnych przeglądarek.

appendStyle = function (content) {
  style = document.createElement('STYLE');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(content));
  document.head.appendChild(style);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Lorem Ipsum</h1>
  <p>dolar sit amet</p>
  <button onclick='appendStyle("body { background-color: #ff0000;}h1 { font-family: Helvetica, sans-serif; font-variant: small-caps; letter-spacing: 3px; color: #ff0000; background-color: #000000;}p { font-family: Georgia, serif; font-size: 14px; font-style: normal; font-weight: normal; color: #000000; background-color: #ffff00;}")'>Press me to inject CSS!</button>
</body>

</html>

Rozwiń fragment kodu

Możesz także leniwie ładować zewnętrzne pliki CSS, używając następującego fragmentu:

appendExternalStyle = function (content) {
  link = document.createElement('LINK');
  link.rel = 'stylesheet';
  link.href = content;
  link.type = 'text/css';
  document.head.appendChild(link);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html {
      font-family: sans-serif;
      font-display: swap;
    }
  </style>
</head>

<body>

  <h1>Lorem Ipsum</h1>
  <p>dolar sit amet</p>
  <button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button>
</body>

</html>

Rozwiń fragment kodu

— Joel Ellis
źródło

Jest to z grubsza podejście, które opracowałem niezależnie. Krótkie i słodkie i działa w najnowszych przeglądarkach Firefox, Microsoft Edge i Chrome. Oczywiście w przeglądarce Internet Explorer jest zbyt wiele błędów JavaScript, aby martwić się o włączenie jej do zgodności z przeglądarką.

— David Spector,

3

Napisałeś:

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

Dlaczego nie to

var styleNode = document.createElement("style");
document.head.appendChild(styleNode);

Odtąd możesz łatwo dołączać reguły CSS do kodu HTML:

styleNode.innerHTML = "h1 { background: red; }\n";
styleNode.innerHTML += "h2 { background: green; }\n";

... lub bezpośrednio do DOM:

styleNode.sheet.insertRule("h1 { background: red; }");
styleNode.sheet.insertRule("h2 { background: green; }");

Spodziewam się, że zadziała to wszędzie oprócz archaicznych przeglądarek.

Zdecydowanie działa w Chrome w roku 2019.

— 7vujy0f0hy
źródło

3

document.head.innerHTML += `
  <style>
    h1 {
      color: red; 
    }
    p {
      color: blue;
    }
  </style>`

<h1>I'm red!</h1>
<p>I'm blue!</p>

Rozwiń fragment kodu

Zdecydowanie najprostsze rozwiązanie. Wszystko, co musisz zrobić, to wpisać to samo, co normalnie deklarujesz styletagi, pomiędzy backtickami

— Kabirr singh sahni
źródło

1

Witam i witam na stronie. Chociaż ten kod może rozwiązać dany problem, należy również wyjaśnić, w jaki sposób i dlaczego to działa.

— Radiodef,

1

Jeśli napotykasz problem polegający na wstrzykiwaniu ciągu CSS na stronę, łatwiej jest to zrobić z <link>elementem niż z <style>elementem.

Poniżej dodano p { color: green; }regułę do strony.

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

Możesz utworzyć to w JavaScript po prostu przez kodowanie URL-a łańcucha CSS i dodanie go do HREFatrybutu. Znacznie prostsze niż wszystkie dziwactwa <style>elementów lub bezpośredni dostęp do arkuszy stylów.

let linkElement: HTMLLinkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

Będzie to działać w IE 5.5 w górę

— moefinley
źródło

Dynamiczne wstrzykiwanie bloku stylu w głowę nie aktualizowało stylu w niektórych przypadkach. To działa!

— prograhammer

-1

this link may helpful to you:

http://jonraasch.com/blog/javascript-style-node

— Vinod Poorma
źródło

Nie używaj wstępnie sformatowanych bloków tekstu / kodu dla krótkiego akapitu. Linkowanie do odpowiedzi w ten sposób jest również bezużyteczne. Najpierw streszcz stronę internetową.

— FryingggPannn