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.
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.
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]));
}
}
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.
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.