To sto hoces moguce je uraditi u javascriptu, bez refresha i server side generisanja css-a, s tim da je potpuno tacno ovo sto je ivanhoe rekao, ali ako to stvarno hoces, onda ok.
Moze se pristuputi svakom css-u (nebitno da li je u pitanju iniline ili externi css fajl) i svaki rule se moze modifikovati, brisati ili dodavati novi. Ovo je primer koji sve #000000 boje fonta menja u #008000, a pozadine koje su #ffffff u #d0d0d0. Jedino je dodata funkcija color2hex, posto firefox boje predstavlja kao rgb(ddd, ddd, ddd), pa se to konvertuje u #xxxxxx format.
HTML kôd:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JS change CSS</title>
<style>
body {
font-family: arial, helvetica, sans-serif;
}
h1 {
color: #000000;
background-color: #ffffff;
}
p {
color: #000000;
background-color: #ffffff;
width: 80%;
}
</style>
<script type="text/javascript">
function changecolor() {
var css = document.styleSheets[0];
var rules = (css.rules) ? css.rules : css.cssRules;
for (var i = 0; i < rules.length; i++) {
if (color2hex(rules[i].style.color) == '#000000') {
rules[i].style.color = '#008000';
}
if (color2hex(rules[i].style.backgroundColor) == '#ffffff') {
rules[i].style.backgroundColor = '#d0d0d0';
}
}
}
function color2hex(str) {
var bytes = str.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (bytes) {
var r = parseInt(bytes[1]).toString(16);
var g = parseInt(bytes[2]).toString(16);
var b = parseInt(bytes[3]).toString(16);
r = (r.length == 1) ? ('0' + r) : r;
g = (g.length == 1) ? ('0' + g) : g;
b = (b.length == 1) ? ('0' + b) : b;
return '#' + r + g + b;
}
return str.toLowerCase();
}
</script>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel mauris. Etiam blandit pretium pede. Curabitur ligula. Aenean auctor. Integer scelerisque velit in augue. In non lacus. Quisque sagittis aliquet libero.</p>
<input type="button" onclick="changecolor()" value="Change Colors">
</body>
</html>