How to edit .css file from html via jquery


Tags: jquery,html,css

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


Solution :

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

    CSS Howto..

    How to tilt inner element forward when tilting outer back with css 3d transforms

    How to arrange this php if-statement which outputs ratings (good, great, exxelent, etc.)?

    How to get the actual rendered font when it's not defined in CSS?

    How to find CSS deceleration for :hover state using Chrome's inspector

    How to put html input text into an image using CSS?

    Why don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)

    How to select elements when there is a space in an HTML class

    How can I prevent wild scrolling when a fixed position text input form field gains focus?

    How to move a div horizontal then vertical using css animation?

    How do I centre align two BTN button within a jumbotron in HTML

    how to restrict the children element inside the parent element in css?

    how to define css to get the simple tabbed menu

    How can I get a left-navigation column to fill the entire left side of the middle of a webpage using CSS?

    how to position a container in the middle of the screen? [duplicate]

    How to scroll left column when cursor is above right column?

    How to use jQuery without making a mess? [closed]

    How would YOU do this: Tables or CSS? [closed]

    How to print javascript within HTML id tag

    How to right align a div containing a form in another div?

    How to use css selector with “not” in c#?

    Chrome showing target link after event has been prevented

    Vertical centering images within a slideshow using JS code?

    How to fade gradient, image or texture as background?

    Using CSS, how can I make my document expand to the user's viewport if the content doesn't scroll?

    How to magnify images on hover using purely css? [closed]

    How to load CSS into CodeIgniter

    How to build sliding horizontal menu. CSS

    How to position a CSS triangle using ::after?

    How to drag and drop a div changing the css left and top attributes in HTML 5?

    How can I make a fixed div JUMP when scrolling?