Add styles via DOM in IE and FF

From MapbenderWiki

Jump to: navigation, search

Contents

[edit]

Goal

The objective is to insert a string with CSS content (rule) in a Style node via JavaScript.

An example for a rule might be 

body{
 font-family:Verdana,Arial,sans-serif;
 font-size: 12px;
 line-height:2;
}
.even{
 color:blue;
 font-family:Verdana,Arial,sans-serif;
 font-size: 11px;
}
.uneven{
 color:red;
 font-family:Verdana,Arial,sans-serif;
 font-size: 11px;
}


The HTML document should look like this in the end 

<head>
.
.
.
<style type="text/css">
 body{
  font-family:Verdana,Arial,sans-serif;
  font-size: 12px;
  line-height:2;
 }
 .even{
  color:blue;
  font-family:Verdana,Arial,sans-serif;
  font-size: 11px;
 }
 .uneven{
  color:red;
  font-family:Verdana,Arial,sans-serif;
  font-size: 11px;
 }
</style>
.
.
.
</head>


[edit]

Solution

[edit]

Internet Explorer

Using createTextNode or innerHTML won't work, as you are not editing HTML content, but CSS.

[edit]

Create new stylesheet

IE uses the functions createStyleSheet() and addRule, take a look at this example 

// create a Style Sheet object (IE only)
var styleSheetObj=document.createStyleSheet();

// get the DOM node of the style sheet object, set the type
styleObj=styleSheetObj.owningElement || styleSheetObj.ownerNode;
styleObj.setAttribute("type","text/css");

// rule is a string with CSS markup, see above.
// Split the String in an array, as each rule has to be inserted individually
ruleArray = rule.split("}");

// insert every rule
for (var i=0; i < ruleArray.length - 1; i++) {

   // trimString is a self-made function to 
   // remove whitespaces and endlines from a JS string
   var currentRule = trimString(ruleArray[i]);

   // split the remaining String into pairs "name" and "value",
   // for example:
   // 
   // name = ".uneven"
   //
   // value = "color:red;font-family:Verdana,Arial,sans-serif;font-size: 11px;"
   var nameValueArray = currentRule.split("{");
   var name = nameValueArray[0];
   var value = nameValueArray[1];

   // add the rule to the style sheet node  
   styleSheetObj.addRule(name,value);
}

To write a tag (for example, a "span" tag) that references these classes, use this 

// generate a span node
var spanNode = document.createElement("span");

// set the class name, for example ".even"
spanNode.className = ".even";

//append the node to the document body
document.body.appendChild(spanNode);
[edit]
css class

works only using 

Element.className = "classname";
[edit]

Use existing stylesheet / extend existing stylesheet

Instead of creating and filling a new stylesheet you can extend an existing stylesheet, take a look at this example 

// get existing stylesheet (choose using index, e.g. the first one)
styleSheetObj=document.styleSheets[0];

//add new style declarations to existing styleSheet 
styleSheetObj.addRule(".div","background-color:#EE00FF");


[edit]

Firefox

Firefox is not as strict as Internet Explorer. You can add the styles with the general DOM operations. 

// create the style node, set the style
var styleObj=document.createElement("style");
styleObj.setAttribute("type","text/css");

// append the node to the head
document.getElementsByTagName("head")[0].appendChild(styleObj);

// insert the content via createTextNode
styleObj.appendChild(document.createTextNode(rule+"\n"));

Writing in the tag is the same as in IE, see above.

[edit]
css class

works using 

Element.className = "classname";

or 

Element.setAttribute("class", "classname");
Retrieved from "http://www.mapbender.org/Add_styles_via_DOM_in_IE_and_FF"
Personal tools