Easy storage of css properties using Javascript

2007-08-21T14:17:00.000-07:00

For some time I've been looking at how to parse and store a raw css file in javascript, asking questions like should I use an xml document or nested arrays or some long list of nested custom objects? These three techniques are all valid but none ideal.

Well, tonight I had the idea, which I'll share with the world now. The simplicity and easy of implementation makes it look like a worthy place to invest some time and energy.

Take the following example css snippet:

#nav {
font-size: 12px;
color: #f00;
border: 1px solid #000;
margin: 4px;
}

Well, which storage method is the best candidate for the complexity of nested css rules and statements?

JSON. (JavaScript Object Notation)

We can easily describe the above css snippet using Javascript:

var csstest = {"#nav": {"font-size":"12px;", "color":"#f00;","border":"1px solid #000;","margin":"4px;"}};

alert(csstest["#nav"]["font-size"]);

In fact, its spooky how similiar CSS and JSON are considering the fact they're used for completely different purposes. Apart from the obvious need for ("...") quotes the format looks very compact, ideal for other processing inside JavaScript itself.

Have fun with parsing css and JSON.

Enjoy.

A compact Javascript multi onload function

2007-08-20T10:58:00.000-07:00

Theres plenty of other javascript snippets to allow multiple 'onload' events on the net, but probably none as small as this.

Heres a little example with the magic function

Enjoy!

<script>
function Multi(f){var o=window.onload;window.onload=function(){o?o():o;f()}}

//the old way ;)
window.onload = function() {alert("onload!");}
//example :)
new Multi(function() {alert('second');});
new Multi(function() {alert('three');});
</script>

TAD: Coding for fun

Easy storage of css properties using Javascript

A compact Javascript multi onload function