views:

111

answers:

3

I'd like to know all css settings in page using jquery. I know to get some css's setting, we do like this,

$('#container').css("width")

As this, I tried to use $('*') to get all css settings but couldn't success. Please give me some advice.

A: 

If you want the elements with inline CSS try:

$("[style]").each(function() {
  for (var i=0; i<this.style.length; i++) {
    console.log(this.style[i] + " = " + this.style.getPropertyValue(this.style[i]));
  }
});

Note: this uses the Javascript style names which are as per the CSS spec rather than those used in jQuery's css() (eg "margin-top" in CSS, "marginTop" in css()).

If you want all the style that's applied to an element based on its inline style and CSS rules defined both internally on the Web page and through external style sheets, that's going to be somewhat more difficult.

You can at least find the global style sheets with something like:

for (var i=0; i<document.styleSheets.length; i++) {
  var css = document.styleSheets[i];
  for (var j=0; j<css.length; j++) {
    console.log(css[j] + " = " + css.getPropertyValue(css[j]));
  }
}
cletus
Would love to know why this was downvoted...
cletus
A: 

For me your question isn't clear enough to answer. What is it exactly that you want to achieve?

all css settings in page

could mean a lot of different things.

  • Do you want the calculated CSS properties of the browser
  • Do you want the original CSS classes which apply (not the calculated values but the declared values from .css files) + all of them or only the most specific match
  • Do you want the original inline CSS stylings
  • Do you want a list of all included stylesheets
  • Do you really want all properties or only a selection thereof
  • Do you want this for every element on the page or only for specific ones
  • ....
jitter
A: 

To cletus Thank you cletus for your quick answer. I got the information I need using your below advice.

To jitter Thank you for your attention. I wanted to know both original inline CSS stylings and a list of all included stylesheets.

jozei
Please don't post an answer if it is not an answer. Use the comment system.
TM