10 April 2007

Dynamic variables in CSS via JavaScript

There seems to be a need for dynamic variables in css . All the solutions require some server side code … is JavaScript an option ?

I personally don't have a need for dynamic variables but I can see how it could be useful. I just never understand why JavaScript is not an option

why javascript …

examples …

Enough talk, I did two quick examples ... these are files are identical except they set different variables for colors and size:
white background »
orange background »

how …

I am not going to give a tutorial on JavaScript ... but just want to show the basic concept...


//variable in css
background-color: DVCJ_BGCOLOR;

//javascript setting
DVCJ_BGCOLOR	= '#fff';

//replacement
dvjc_css = dvjc_css.replace(/DVCJ_BGCOLOR/g, DVCJ_BGCOLOR);

//write css
document.write('<style>'+ dvjc_css +'</style>');

the source …

dvcj.zip

 

comment



note: you can only submit after you hit preview


nuff-respec is a weblog written by daniel bulli a senior web programmer in boston, ma.
more >

contact | resume | profile

recently :::

diversions :::

Using Flash And Staying Standards Compliant
Anyone who has ever worked with Flash on the web has likely come across the fact that embedding flash into a web page is usually no walk in the park...
A Design is Finished when...
This is probably the hardest part of designing for me.... 23 Pro designers weigh in with their opinions ...
JungleCrazy.com
Find all the Amazon.com products that are discounted by at least 70%
IETester
IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.
you still want more »