The JavaScript Source: CSS : addNewStyleSheetByFullCSS

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

Have you ever wanted to add a style sheet to your document using the full CSS without having to use addRules and insertRules? While this method is a bit "non-standard", it's a pretty nifty approach that can be expanded upon.

I am styling!

Notes

Created by: Ultimater
Web Site: http://invisionfree.com/forums/Black_Forest_Boards
Posted: September 25, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: addStyleSheet.js

/* 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);

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="addStyleSheet.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div class="label">I am styling!</div>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: Jimmy
08/27/2007 09:22:57

1. From: akil
01/30/2007 01:14:11

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: Jimmy08/27/2007 09:22:57

1. From: akil01/30/2007 01:14:11

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

2. From: Jimmy
08/27/2007 09:22:57

1. From: akil
01/30/2007 01:14:11