How to edit .css file from html via jquery

Question

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';
});

Answer 1

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

1. Create a new style element with the required rules and append to the document. (Example)
2. Select elements and apply .css to change the desired properties. (Example)
3. 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');
});​