How to edit .css file from html via jquery

css, html, jquery

Solution

You cannot edit the file itself. However, you can override styles a number of ways.

- Create a new `style` element with the required rules and append to the document. (Example)

- Select elements and apply `.css` to change the desired properties. (Example)

- Define CSS selectors (possibly in concert with #1 above), and add or remove them from items using `.addClass` and `.removeClass`. (Example)

For the type of behavior you describe, you'd use #2 or #3 (#3 is recommended because it's the easiest to maintain). Here's #2 in practice using your example: http://jsfiddle.net/HackedByChinese/HTNGs/1/

$('#demo').click(function() {
    $(this).css('background-color', 'red');
});​

Problem

Is it possible to change attribute properties in a style.css file using a jquery onclick event from html file? I am using the below currently, but I would like to change the css file itself. ``` $('#demo').click(function(){ $(.#demo').slideUp(); this.style.backgroundColor = 'red'; }); ```

Original source