How to create a style tag with Javascript

Question

I m looking for a way to insert a  lt style gt  tag into an HTML page with JavaScript   The best way I found so far   var divNode   document createElement  div    divNode innerHTML     lt br gt  lt style gt h1   background  red    lt  style gt    document body appendChild divNode     This works in Firefox  Opera and Internet Explorer but not in Google Chrome  Also it s a bit ugly with the  lt br gt  in front for IE   Does anyone know of a way to create a  lt style gt  tag that   Is nicer Works with Chrome    Or maybe   This is a non-standard thing I should avoid Three working browsers are great and who uses Chrome anyway

User · Answer

If the problem you re facing is injecting a string of CSS into a page it is easier to do this with the  lt link gt  element than the  lt style gt  element   The following adds p   color  green    rule to the page    lt link rel  stylesheet  type  text css  href  data text css charset UTF-8 p 20 7B 20color 3A 20green 3B 20 7D    gt    You can create this in JavaScript simply by URL encoding your string of CSS and adding it the HREF attribute  Much simpler than all the quirks of  lt style gt  elements or directly accessing stylesheets   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      This will work in IE 5 5 upwards

User · Answer

All good  but for styleNode cssText to work in IE6 with node created by javascipt  you need to append the node to the document before you set the cssText   further info   http   msdn microsoft com en-us library ms533698 28VS 85 29 aspx

User · Answer

An example that works and are compliant with all browsers    var ss   document createElement  link    ss type    text css   ss rel    stylesheet   ss href    style css   document getElementsByTagName  head   0  appendChild ss

User · Answer

I m assuming that you re wanting to insert a style tag versus a link tag  referencing an external CSS   so that s what the following example does    lt html gt    lt head gt     lt title gt Example Page lt  title gt    lt  head gt    lt body gt     lt span gt     This is styled dynamically via JavaScript     lt  span gt    lt  body gt    lt script type  text javascript  gt     var styleNode   document createElement  style       styleNode type    text css         browser detection  based on prototype js     if    window attachEvent  amp  amp   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     lt  script gt   lt  html gt    Also  I noticed in your question that you are using innerHTML  This is actually a non-standard way of inserting data into a page  The best practice is to create a text node and append it to another element node   With respect to your final question  you re going to hear some people say that your work should work across all of the browsers  It all depends on your audience  If no one in your audience is using Chrome  then don t sweat it  however  if you re looking to reach the biggest audience possible  then it s best to support all major A-grade browsers

User · Answer

This function will inject css whenever you call the function appendStyle like this  appendStyle  css you want to inject    This works by injecting a style node into the head of the document  This is a similar technique to what is commonly used to lazy-load JavaScript  It works consistently in most modern browsers    x000D   x000D  appendStyle   function  content    x000D    style   document createElement  STYLE    x000D    style type    text css   x000D    style appendChild document createTextNode content    x000D    document head appendChild style   x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  UTF-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1 0  gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt h1 gt Lorem Ipsum lt  h1 gt  x000D     lt p gt dolar sit amet lt  p gt  x000D     lt 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      gt Press me to inject CSS  lt  button gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    You can also lazy-load external CSS files by using the following snippet    x000D   x000D  appendExternalStyle   function  content    x000D    link   document createElement  LINK    x000D    link rel    stylesheet   x000D    link href   content  x000D    link type    text css   x000D    document head appendChild link   x000D    x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  UTF-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1 0  gt  x000D     lt style gt  x000D      html   x000D        font-family  sans-serif  x000D        font-display  swap  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt h1 gt Lorem Ipsum lt  h1 gt  x000D     lt p gt dolar sit amet lt  p gt  x000D     lt button onclick  appendExternalStyle  data text css base64 OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ      gt press me to inject css  lt  button gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You wrote   var divNode   document createElement  div    divNode innerHTML     lt br gt  lt style gt h1   background  red    lt  style gt    document body appendChild divNode     Why not this   var styleNode   document createElement  style    document head appendChild styleNode     Henceforward you can append CSS rules easily to the HTML code   styleNode innerHTML    h1   background  red    n   styleNode innerHTML     h2   background  green    n        or directly to the DOM   styleNode sheet insertRule  h1   background  red       styleNode sheet insertRule  h2   background  green         I expect this to work everywhere except archaic browsers   Definitely works in Chrome in year 2019

User · Answer

this link may helpful to you     http   jonraasch com blog javascript-style-node

User · Answer

Here is a variant for dynamically adding a class   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

User · Answer

lt style gt  tags should be places within the  lt head gt  element  and each added tag should be added to the bottom of the  lt head gt  tag   Using insertAdjacentHTML to inject a style tag into the document head tag   Native DOM    x000D   x000D  document head insertAdjacentHTML  beforeend     lt style gt body background red  lt  style gt    x000D   x000D   x000D      jQuery    x000D   x000D      lt style gt    text  body background red    appendTo document head  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Try adding the style element to the head rather than the body   This was tested in IE  7-9   Firefox  Opera and 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

User · Answer

as i know there are 4 ways to do that  var style  document createElement  quot style quot     document head    document documentElement  appendChild style   var rule   visited      color  rgb 233  106  106   important        no 1 style innerHTML   rule    no 2 style appendChild document createTextNode rule       no 3 limited with one group style sheet insertRule rule     no 4 limited too document styleSheets 0  insertRule  strong   color  red          addon style sheet cssRules   list all style stylesheet deleteRule 0     delete first rule

User · Answer

x000D   x000D  document head innerHTML      x000D     lt style gt  x000D      h1   x000D        color  red   x000D        x000D      p   x000D        color  blue  x000D        x000D     lt  style gt   x000D   lt h1 gt I m red  lt  h1 gt  x000D   lt p gt I m blue  lt  p gt  x000D   x000D   x000D    By far the most straightforward solution  All you have to do is type the same as how you d normally declare style tags  between the backticks

User · Answer

This object variable will append style tag to the head tag with type attribute and one simple transition rule inside that matches every single id class element  Feel free to modify content property and inject as many rules as you need  Just make sure that css rules inside content remain in one line  or  escape  each new line  if You prefer so     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

User · Answer

Oftentimes there s a need to override existing rules  so appending new styles to the HEAD doesn t work in every case   I came up with this simple function that summarizes all not valid  append to the BODY  approaches and is just more convenient to use and debug  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                         lt br gt  for IE  http   goo gl vLY4x7         temp innerHTML     lt br gt  lt style gt    cssRules    lt  style gt            wrap appendChild  temp children 1               document     Demo  codepen  jsfiddle

User · Answer

Here s a script which adds IE-style createStyleSheet   and addRule   methods to browsers which don t have them   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                You can add external files via  document createStyleSheet  foo css      and dynamically create rules via  var sheet   document createStyleSheet    sheet addRule  h1    background  red

[javascript] How to create a <style> tag with Javascript?

Examples related to javascript

Examples related to html

Examples related to css