1

We have css file. Let's say we change it with jquery like that $('body').css('color':'red');. Is it possible to retrieve current .css file? If not, how would you try to do that?

good_evening
  • 21,085
  • 65
  • 193
  • 298
  • How do you mean; you want to find out what the color is presently and then alter it if it's different ? – Russ Clarke Feb 17 '12 at 01:10
  • @RussC: No. Let's say I change font-size, color etc. I want to get plain updated css file. – good_evening Feb 17 '12 at 01:12
  • @hey I think you're confusing style attributes with the actual file. –  Feb 17 '12 at 01:13
  • 1
    @Shark, it sounds like he wants a generated stylesheet with all of the *effective* styles on the page. Basically, the equivalent of innerHTML (effective HTML), but for CSS. – Matthew Flaschen Feb 17 '12 at 01:14
  • I see - if you use jQuery to update a style property, it doesn't change the CSS file, it changes the DOM, the browsers internal representation of the page. If you reload the page, the jQuery change will revert. – Russ Clarke Feb 17 '12 at 01:15
  • 1
    @Russ, I don't think he wants to change the physical file on the server. he just wants to see what a file that *could* produce the CSS would be. Given that you can get [computed style](https://developer.mozilla.org/en/DOM/window.getComputedStyle), this should be quite possible. But depending how you do it, the output would be very verbose. – Matthew Flaschen Feb 17 '12 at 01:18
  • You can also combine the CSS rules with inline styles, as shown in the answer rfausak links to. – Matthew Flaschen Feb 17 '12 at 01:24

2 Answers2

3

A CSS file is static - if you change an element's style with jQuery that changes the element in the DOM, but not in the loaded CSS files. If you are interested in getting the current CSS style for a given property of an element, you can use jQuery's css() method.

If you are interested in getting all styling for a given element, perhaps this answer will help: https://stackoverflow.com/a/5830517/449853

This answer discusses where jQuery's css() method gets it's information: https://stackoverflow.com/a/1020560/449853

Getting all current styles might involve looping through all elements in the DOM.

Community
  • 1
  • 1
Rusty Fausak
  • 7,355
  • 1
  • 27
  • 38
  • That answer is a good start. You would also need to ensure appropriate selectors. Probably the best way is to generate a unique selector for every element (maybe using multiple `nth-child`). – Matthew Flaschen Feb 17 '12 at 01:25
0

jQuery will only change the style attribute/property of the node, your css file won't change.

Of course you can alter css files (Totally Pwn CSS with Javascript/MDN, or simpler with .cssText), but not genuinely with jQuery.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375