Full version: jsB@nk » Snippet » Add CSS Stylesheet by JavaScript
URL: https://www.javascriptbank.com/add-css-stylesheet-by-javascript.html
Normally, web developers will place CSS code into a pair of tags such as or to a CSS file. But in this snippet, we are creating CSS within JavaScript definition that browsers still understand these CSS properties. Although this CSS example is more complex than old CSS definition, but it is one of ways to develop website; you may consider this is CSS tutorial which quite worthy to see.
Full version: jsB@nk » Snippet » Add CSS Stylesheet by JavaScript
URL: https://www.javascriptbank.com/add-css-stylesheet-by-javascript.html
<script type="text/javascript" name="addStyleSheet.js">// Created by: Ultimater :: http://invisionfree.com/forums/Black_Forest_Boards/* The addNewStyleSheetByFullCSS function accepts one argument, the full CSS to be used within the style sheet, and the new style sheet is appended to the DOM tree automatically. */function addNewStyleSheetByFullCSS(innerCSS){ var h=document.getElementsByTagName("head");if(!h.length)return; var newStyleSheet=document.createElement("style"); newStyleSheet.type="text/css"; h[0].appendChild(newStyleSheet); try{ newStyleSheet.styleSheet.cssText=innerCSS; }catch(e){try{ newStyleSheet.appendChild(document.createTextNode(innerCSS)); newStyleSheet.innerHTML=innerCSS; }catch(e){}}}// ============var fullCSS=''+'nbody { margin: 20px 10px 10px 10px; padding: 0; background-color: #FFFFFF; color: #000000;'+'nfont-family:serif; font-size:medium;'+'n}'+'ntr { vertical-align: top; }'+'n.fieldframe { background-color: #F1F2F6; color: #929BAB; border: 1px solid #929BAB; padding: 5px }'+'n.buttonframe { background-color: #F1F2F6; color: #929BAB; margin-top: 10px; border: 1px solid #929BAB; padding: 5px }'+'n.field { background-color: #E3E4EA; color: #000000; border: 1px solid #929BAB;}'+'n.label { background-color: #E3E4EA; color: #000000; font-weight: bold; vertical-align: top;'+'nwidth:180px;border:1px solid #929BAB;'+'n}'+'n.input { background-color: #F1F2F6; color: #5D636E; vertical-align: top;'+'nwidth: 80px; border:1px solid #929BAB; padding:2px;'+'n}'+'n.input input{'+'nbackground-color: white; color: black; border:0 none;'+'n}'+'n.button { background-color: #E3E4EA; color: #5D636E; border: 1px solid #929BAB; margin: 1px; }'+'n.button:hover { background-color: #F4F4F6; color: #5D636E; border: 1px solid #929BAB; margin: 1px; }'+'ndiv.field{'+'nmargin:0;padding:2px;'+'n}n'addNewStyleSheetByFullCSS(fullCSS);</script><div class="label">I am styling!</div>