How to dynamically change the style tag using JavaScript?

Question

I want to change the style tag after generating contents. How can I add style to the style tag? I tried using:

document.getElementById(\'style\').appendChil         


        

Answer 1

try this

var currentElement = document.getElementById('style');
var currentStyle = currentElement.getAttribute('style');
var stylePieces = [];
if(currentStyle) {
    stylePieces = currentStyle.split(';');
}
stylePieces.push('new-style: true;');
currentElement.setAttribute('style', stylePieces.join(';'));

Answer 2

style is a property. After you getElementById() you can change its style.

HTML:

<div id='myDiv'>...</div>

JS:

var div = document.getElementById('myDiv')

div.style.background = 'red';
div.style.margin = "10px";
div.style.fontSize = "12px";

etc.

Answer 3

A style element has no element children, as its content is by definition just text (as far as HTML is concerned). But this means that you can just append to its content using the innerHTML property. If your element has <style id=foo>, then you write:

document.getElementById('foo').innerHTML += styleContents;

Answer 4

If you want to append rules to an existing style sheet, the official way to do is with the insertRule methods. It will probably be alot easier on the browser then just appending text. Also if you do it like below, if there is a particular css rule is not valid syntax, it will skip it, thus protecting the integrity of your document.

Uses jQuery just for string timming, probably not needed anyway.

You have to give it the ID of the style tag.

function AddMoreStyles(code, styleTagId) {

    var sheet = document.getElementById('#' + styleTagId);

    let lines = code.replace(/[\r\n\t]/gm, ' ').split(/}/);
    if (!sheet) {
        return;
    }
    sheet = sheet.styleSheet || sheet.sheet || sheet;
    lines.forEach(function (str) {
        str = $.trim(str) + '}';
        let m = str.match(/(.+?)\{(.*?)}/), m1, m2;
        if (m) {
            m1 = $.trim(m[1]);
            m2 = $.trim(m[2]);
            try {
                if (sheet.insertRule) sheet.insertRule(m1 + '{' + m2 + '}', sheet.cssRules.length);
                else sheet.addRule(m1, m2);
            } catch (e) {
                console.log("!ERROR in css rule: " + e.message);
            }
        }
    });
};

Answer 5

Why don't you use the jQuery library and append new CSS to the DOM elements directly?

For example:

<script>
$(document).ready(function(){
    $("#an_element").css("border", "1px solid #333");
});
</script>

<div id="an_element">Test</a>

This would add a border around your element with the ID "an_element".

jQuery Selectors

jQuery CSS

Answer 6

I know this is an old question but I have been trying to figure out a way to dynamically update these as well without applying styling directly to the element.

If you give a style tag an ID and select it you can then access its CSS using sheet property.

From here you can update anything you want. By replacing the entire CSS inside the tag or updating individual classes.

document.getElementById('somestyletagid').sheet.cssRules[0].selectorText

This is your class selector.

document.getElementById('somestyletagid').sheet.cssRules[0].style

These are are all the individual css properties on that class.

You can update the background color by doing this:

document.getElementById('somestyletagid').sheet.cssRules[0].style.backgroundColor = 'red'

This is a way to access any style tags in your html. Unfortunately there is no strictly unique ID for each CSSStyleRule that I can find. Closest is the selectorText but obviously that can be repeated. Either way at least for my needs this does exactly what I need.

You can also update any included CSS files by using document.styleSheets and accessing them in generally the same way.

document.styleSheets[0].href

The href of the included css file.

document.styleSheets[0].cssRules

All the classes in the sheet.

Hope this helps someone!