Phiên bản đầy đủ: jsB@nk » Thủ thuật » Tạo CSS bằng JavaScript
URL: https://www.javascriptbank.com/add-css-stylesheet-by-javascript.html
Thông thường để thêm mã trang trí CSS, các nhà phát triển web thường để trong cặp thẻ hoặc , nhưng với đoạn mã JavaScript này, chúng ta có thể đặt mã CSS trong khu vực khai báo JavaScript mà trình duyệt vẫn hiểu. Tuy có hơi rắc rối hơn so với cách khai báo CSS kiểu thông thường, nhưng dù sao đây cũng là một trong những cách làm web.
Phiên bản đầy đủ: jsB@nk » Thủ thuật » Tạo CSS bằng 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>