Javascript - CSS

javascript-dom

http://www.sitepoint.com/creating-simple-style-switcher
http://answers.oreilly.com/topic/1819-how-to-change-an-elements-css-properties-with-javascript/
http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/
http://www.javascriptkit.com/domref/style.shtml
http://www.phpied.com/dynamic-script-and-style-elements-in-ie/
http://dev.opera.com/articles/view/dynamic-style-css-javascript/
http://javascript.info/tutorial/styles-and-classes-getcomputedstyle
http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript

// JavaScript - Using JavaScript to style an element.

// Setting the cursor to "wait"
window.document.body.style.cursor = "wait";

// To change the background color of HTML document using JavaScript:
document.body.bgColor="pink";  

document.getElementById(“myText”).style.fontSize = “20";
document.getElementById(“myText”).className = “anyclass”;

el.style.overflowX = "auto";
el.style.overflowY = "auto";
el.style.fontSize = "120px";
el.style.backgroundColor = "blue";
element.style.display = 'none';
element.style.textAlign = 'left';
el.style.color = "white";
el.style.pointer = '..';

el.setAttribute("style","font-family: Courier; width: 500px; background-color: yellow;");

If the particular property contains multiple words, we need to remove the 
hyphen and use camel-case as above.

To add a class to an element, without removing/affecting existing values:

document.getElementById("MyElement").className += " MyClass";

To remove a single class to an element, without affecting other potential 
classes:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )

To obtain a list of CSS classes that has been given to an element, we can use 
the getAttribute method, and if it does not work, we can use the .attributes 
collection, and we can also use:

var classNames = element.className;

To insert a style node:

var head = top.frmMain.window.document.getElementsByTagName("head")[0];
var style = top.frmMenu.oCFMenu.frameString;

var ss1 = document.createElement('style');
ss1.setAttribute("type", "text/css");
head.appendChild(ss1);
if (ss1.styleSheet) {   // IE
  ss1.styleSheet.cssText = style;
} else {                // the world
  var tt1 = document.createTextNode(style);
  ss1.appendChild(tt1);
}

It's important for IE that you append the style to the head before setting its 
content. Otherwise IE678 will *crash* is the css string contains an @import. 
Go figure!

To examine the style sheet objects, look at the document.styleSheets property.

var css = 'h1 { background: red; }',
    head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if(style.styleSheet){
    style.styleSheet.cssText = css;
}else{
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

--------------------------------------------------------------------------------------------------

   var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   // browser detection (based on prototype.js)
   if(!!(window.attachEvent && !window.opera)) {
        styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
   } else {
        var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
        styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);

--------------------------------------------------------------------------------------------------

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = (function() {
        function createStyleSheet(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }

            document.getElementsByTagName('head')[0].appendChild(element);
            var sheet = document.styleSheets[document.styleSheets.length - 1];

            if(typeof sheet.addRule === 'undefined')
                sheet.addRule = addRule;

            if(typeof sheet.removeRule === 'undefined')
                sheet.removeRule = sheet.deleteRule;

            return sheet;
        }

        function addRule(selectorText, cssText, index) {
            if(typeof index === 'undefined')
                index = this.cssRules.length;

            this.insertRule(selectorText + ' {' + cssText + '}', index);
        }

        return createStyleSheet;
    })();
}

----------------------------------------------------------------

function setClassStyle(class_name, css) {
  var style_sheet = document.createElement('style');
  if (style_sheet) {
    style_sheet.setAttribute('type', 'text/css');
    var cstr = '.' + class_name + ' {' + css + '}';
    var rules = document.createTextNode(cstr);
    if(style_sheet.styleSheet){// IE
      style_sheet.styleSheet.cssText = rules.nodeValue;
    } else {
      style_sheet.appendChild(rules);
    }
    var head = document.getElementsByTagName('head')[0];
    if (head) {
      head.appendChild(style_sheet);
    }
  }
http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx
--------------------------------------------------

 function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    if (s.styleSheet) {   // IE
        s.styleSheet.cssText = css;
    } else {                // the world
        s.appendChild(document.createTextNode(css));
    }
    head.appendChild(s);
 }
--------------------------------------------------

var ss = document.createElement('script');
var scr = 'alert("bah");';
ss.text = scr;
var hh = document.getElementsByTagName('head')[0];
hh.appendChild(ss);

--------------------------------------------------

var ss1 = document.createElement('style');
var def = 'body {color: red;}';
ss1.setAttribute("type", "text/css");
ss1.styleSheet.cssText = def;
var hh1 = document.getElementsByTagName('head')[0];
hh1.appendChild(ss1);

How to change the style of an element?

el.style.overflowX = "auto";
el.style.overflowY = "auto";
el.style.fontSize = "120px";
el.style.backgroundColor = "blue";
element.style.display = 'none';
element.style.textAlign = 'left';
el.style.color = "white";

el.setAttribute("style","font-family: Courier; width: 500px; background-color: yellow;");

document.getElementById("MyElement").className = "MyClass";

If the particular property contains multiple words, we need to remove the hyphen and use camel-case as above.

How can we change the mouse pointer?

el.style.pointer = '..';

http://www.echoecho.com/csscursors.htm

I cannot think of a situation where I need to change the mouse pointer via JavaScript. Instead of doing it like this, we can use JavaScript to add a class to an element, and remove the class from the element when necessary.

How to change all classes for an element?

document.getElementById("MyElement").className = "MyClass";

How to add a class to an element, without removing/affecting existing values?

Append a space and the new classname, like so:

document.getElementById("MyElement").className += " MyClass";

How to remove a single class to an element, without affecting other potential classes?

A simple regex replace is required:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )

How can we obtain a list of CSS classes that has been given to an element?

We can use the getAttribute method, and if it does not work, we can use the .attributes collection, and we can also use:

var classNames = element.className;

How to insert a style node?

var head = top.frmMain.window.document.getElementsByTagName("head")[0];
var style = top.frmMenu.oCFMenu.frameString;

var ss1 = document.createElement('style');
ss1.setAttribute("type", "text/css");
head.appendChild(ss1);
if (ss1.styleSheet) {   // IE
    ss1.styleSheet.cssText = style;
} else {                // the world
    var tt1 = document.createTextNode(style);
    ss1.appendChild(tt1);
}

This code dynamically load a style sheet.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License