Programming Tips - javaScript: On-the-fly style

Date: 2019oct31
Language: javaScript
Keywords: dynamic, on-the-fly, css, style

Q.  javaScript: On-the-fly <style>

A.  I first looked into seeing if you could limit the scope
of a <style> statement.  There were attempts at this but it currently doesn't
seem to be possible.  So the best insurance is to give your global style names
long prefixes.

Here is my function which adds some <style> to the current document.
It uses jQuery.

function initMyApplicationStyle() { if ($('#myapplication-style').length > 0) { console.log('initMyApplicationStyle: already there'); return; } console.log('initMyApplicationStyle: not there, adding'); const style = '<style id="myapplication-style">' + '#myapplication-main { font-size: 100em; ... }' + '#myapplication-thing1 { background-color: #ccc; ... }' + '</style>'; $(document.body).prepend(style); }