how to alter a css class directly?

Question

Is it possible, to use javascript to edit the contents of a.css file directly? (In turn, impacting the style of the elements that use the class being modified?)

I've seen a few answers to such a question, but they all deal with the dynamic creation of HTML and css code in the html document itself, which I don't quite want...

Say for example, I have the following code:

*{
    color:red;
}

This makes ALL the text in the document go red. If I give the client an option to drop down and change the color of all the text to whatever he/she wishes, then the most logical choice is for me to go into the.css file, and edit the value of 'color' under the universal selector...

Ideas?

Answer 1

You can do all your css manipulation in a single style element you append to the head- anything you put there takes precedence over the other stylesheets, and your users can 'backtrack' to the page defaults by deleting their changes, one at a time or all at once.

Using the last sheet (your new style element's rules) in the document.styleSheets collection, you can append new rules, delete old rules, or edit existing rules.

And you have a piece of text you can save on your server or in local storage for each user, possibly to add to the document the next time they visit.

Answer 2

The way I would approach this is to save the preference in something like a profile and when the page loads, dynamically apply the preference using the page generator or using Javascript. Using the page generator would make things smoother as the CSS code will be in the page itself when it loads.

Answer 3

You can't add to the CSS with JavaScript, but you can add styles to an element or a series of elements.

If you want to give your clients control over the styles you can have them created with PHP. You'd basically just use your variables as values and have them link to the PHP file in the CSS link element.

<link rel="stylesheet" type="text/css" href="/path/to/css.php" />

Answer 4

This looks interesting...

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

Answer 5

In short, it's possible to use javascript to change css. You can use jQuery and there are some examples here: http://api.jquery.com/css/ .

Answer 6

You could do...

var elements = document.getElementsByTagName('body')[0].getElementsByTagName('*');

for (var i = 0, length = elements.length; i < length; i++) {
    elements[i].style.color = '#f00';
}

Answer 7

I am assuming that you want to alter the original.css file on the server, so that style change is maintained for the following requests. But JavaScript executes in the browser and.css files live on the server. So the short answer is, no, it cannot be done. Not practically anyway.

You could, if you really wanted to, create some JavaScript that makes an AJAX request to the server and then write some server side code to receive the request and modify the.css file accordingly. That would more trouble than it would be worth, and probably create an entertaining security vulnerability, so I would not recommend it.

Answer 8

Dynamically load CSS file, using pure JavaScript

---

var filename = "matrix.css";
var css      = document.createElement("link");

css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", filename);
document.getElementsByTagName("head")[0].appendChild(css);