CODEWITHSUNDEEP
javascriptcss
Tom
Tom

Reputation: 5201

How to programmatically apply CSS definitions to the whole page?

I'm sure the information already exists, but I couldn't find it; sorry :-/

I want to create CSS rules using JavaScript, and apply them to the whole page, as if they were in a style element in the document's head. I don't want to do it by generating the CSS text - I want to keep the rules as entities (JavaScript variables) that I can change, thus changing the appearance of the page later on.

Any help will be most appreciated!

Upvotes: 9

Views: 12499

Answers (5)

Tom
Tom

Reputation: 5201

I've found what I wanted: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml .

(Thanks to all who've answered and commented. What I wanted - and finally found, see the link above - was an actual CSS-rule object that I could work with dynamically, like with HTML elements. While some of the answers came close, none of them was exactly it.)

Upvotes: 6

Raphael Michel
Raphael Michel

Reputation: 854

You could simply embed jQuery (you should check out jQuery anyway) and execute JavaScript like this:

$("h2").css("margin-bottom", "5px");

Upvotes: -1

qw3n
qw3n

Reputation: 6334

Depending on your needs if you need a quick and dirty way to edit css here is something that might work for you. You could simplify it some or even expand on it.

function css(){
  rules={};
  ref=//get a reference to a style element
  function setRules(){
    var out='';
    for(var x in rules){
      out+=x+'{'+rules[x]+'}';
    }
    ref.innerHTML=out;
  }
  this.addRule=function(ident,styles,values){
    var a;
    if(rules[ident]){
      a=rules[ident];
    }
    else{
      a = new cssR();
      rules[ident]=a;
    }
    if(styles.push){
      var i=0;len=styles.length;
      for(i;i<len;i++){
        a[styles[i]]=values[i];
      }
    }
    else{
      a[styles]=values;
    }
    rules[ident]=a;
    setRules();
  }
  function cssR(){

  }
  cssR.prototype.toString=function(){
    var out='';
    for(var x in this){
      typeof this[x]=='function'?'':out+=x+':'+this[x]+';';
    }
    return out;
  }
}
var a=new css();
a.addRule('#main','color','red');
a.addRule('#main','top','0px');
a.addRule('div .right','float','left');
a.addRule('div .right',['float','width'],['right','100px']);

Upvotes: 1

sv_in
sv_in

Reputation: 14049

As Govind mentioned, LessCSS is the most promising library for your need. Here is how it needs to be used:

  1. Create 2 different types of less files. One which would contain the Less variables which you would like to change through javascript to change whole look. Second file should contain the less styles which would be using the less variables of first file to generate the css.
  2. Enable 'Watch Mode' which is a client-side feature that enables your styles to refresh automatically as they are changed.

Now when you need to change the look, just override the Less variables in the first file with new ones. (remove the first Less file using js and add this new file). Less JS will automatically create a new set of CSS styles to change the look.

Keep in mind that CSS created from Less or SASS cannot be cached as they are generate dynamically.

Upvotes: 0

gotofritz
gotofritz

Reputation: 3381

I am not entirely sure what you mean, a practical example would be useful. Anyway, you can easily create CSS rules and stylesheets in JS. It would be something like this:

var elHead = document.getElementsByTagName('head')[0]
  , elStyle = document.createElement('style')
  ;

elStyle.type= 'text/css';
elHead.appendChild( elStyle );
elStyle.innerHTML = 'body { background : red; }'; //for example

Then the stylesheet is just another bit of HTML you write to.

I am not saying this is a good idea though.

Upvotes: 0

Related Questions