jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element
outerHTML (not sure, you need it — just in case)
Limitations: CSSOM is used and stylesheets should be from the same origin.
function getElementChildrenAndStyles(selector) {
var html = $(selector).outerHTML();
selector = selector.split(",").map(function(subselector){
return subselector + "," + subselector + " *";
}).join(",");
elts = $(selector);
var rulesUsed = [];
// main part: walking through all declared style rules
// and checking, whether it is applied to some element
sheets = document.styleSheets;
for(var c = 0; c < sheets.length; c++) {
var rules = sheets[c].rules || sheets[c].cssRules;
for(var r = 0; r < rules.length; r++) {
var selectorText = rules[r].selectorText;
var matchedElts = $(selectorText);
for (var i = 0; i < elts.length; i++) {
if (matchedElts.index(elts[i]) != -1) {
rulesUsed.push(rules[r]); break;
}
}
}
}
var style = rulesUsed.map(function(cssRule){
if (cssRule.style) {
var cssText = cssRule.style.cssText.toLowerCase();
} else {
var cssText = cssRule.cssText;
}
// some beautifying of css
return cssText.replace(/(\{|;)\s+/g, "\$1\n ").replace(/\A\s+}/, "}");
// set indent for css here ^
}).join("\n");
return "<style>\n" + style + "\n</style>\n\n" + html;
}
usage:
getElementChildrenAndStyles("#divId");
No jQuery and no IE support, that's all I can do:
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<script type = "text/javascript">
Element.prototype.getStyles = function () {
var array = {};
var styles = window.getComputedStyle (this, null);
for (var i = 0; i < styles.length; i ++) {
var style = styles[i];
array[style] = styles[style];
}
return array; // return new Array (array, this.innerHTML); You can also return the HTMl content. I don't think its necessary
}
window.addEventListener ("load", function () {
var divId = document.getElementById ("divId");
var someClass = document.getElementsByClassName ("someClass");
var string = "";
var styles = divId.getStyles ();
for (var i in styles) {
string += i + ": " + styles[i] + "\n";
}
alert (string);
alert ("In-line style: Height ->" + styles["height"] + "\n" + "Out-line style: Width ->" + styles["width"])
alert ("HTML: " + divId.innerHTML);
// Same thing with the span element
}, false);
</script>
<style>
#divId {
clear: both;
padding: 3px;
border: 2px dotted #CCC;
font-size: 107%;
line-height: 130%;
width: 660px;
}
.someClass {
color: blue;
}
</style>
<title>Test</title>
</head>
<body>
<div id = "divId" style = "height: 100px">
<span class = "someClass">Some innerText</span>
</div>
</body>
</html>
You can get hold of a style object representing the computed style for an element using window.getComputedStyle() in most browsers and the element's currentStyle property in IE. There are several browser differences, however, with values returned for shortcut properties (such as background), color RGB values, lengths and even font-weight (see this useful test page). Test carefully.
function computedStyle(el) {
return el.currentStyle || window.getComputedStyle(el, null);
}
alert(computedStyle(document.body).color);
You can use something like this for script:-
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function(){
var styleVal = $('#testDiv').attr('style');
console.warn("styleVal >>> " + styleVal);
})
</script>
and simple html would be like this
<div style="border:1px solid red;" id="testDiv">cfwcvb</div>
if you want to save all of the style of an element i think this will be more complicated as you think first of all my first ide was the firebug css console. this shows all fo the style of an element and i thought how? so i searched for the source code of the firebug and i found this:
http://fbug.googlecode.com/svn/branches/firebug1.7/content/firebug/css.js
this code working only on the css part.
const styleGroups =
{
text: [
"font-family",
"font-size",
"font-weight",
"font-style",
"color",
"text-transform",
"text-decoration",
"letter-spacing",
"word-spacing",
"line-height",
"text-align",
"vertical-align",
"direction",
"column-count",
"column-gap",
"column-width"
],
background: [
"background-color",
"background-image",
"background-repeat",
"background-position",
"background-attachment",
"opacity"
],
box: [
"width",
"height",
"top",
"right",
"bottom",
"left",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width",
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color",
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style",
"-moz-border-top-radius",
"-moz-border-right-radius",
"-moz-border-bottom-radius",
"-moz-border-left-radius",
"outline-top-width",
"outline-right-width",
"outline-bottom-width",
"outline-left-width",
"outline-top-color",
"outline-right-color",
"outline-bottom-color",
"outline-left-color",
"outline-top-style",
"outline-right-style",
"outline-bottom-style",
"outline-left-style"
],
layout: [
"position",
"display",
"visibility",
"z-index",
"overflow-x", // http://www.w3.org/TR/2002/WD-css3-box-20021024/#overflow
"overflow-y",
"overflow-clip",
"white-space",
"clip",
"float",
"clear",
"-moz-box-sizing"
],
other: [
"cursor",
"list-style-image",
"list-style-position",
"list-style-type",
"marker-offset",
"user-focus",
"user-select",
"user-modify",
"user-input"
]
};
the function which gets all of the styles.
updateComputedView: function(element)
{
var win = element.ownerDocument.defaultView;
var style = win.getComputedStyle(element, "");
var groups = [];
for (var groupName in styleGroups)
{
var title = $STR("StyleGroup-" + groupName);
var group = {title: title, props: []};
groups.push(group);
var props = styleGroups[groupName];
for (var i = 0; i < props.length; ++i)
{
var propName = props[i];
var propValue = stripUnits(rgbToHex(style.getPropertyValue(propName)));
if (propValue)
group.props.push({name: propName, value: propValue});
}
}
var result = this.template.computedTag.replace({groups: groups}, this.panelNode);
dispatch(this.fbListeners, 'onCSSRulesAdded', [this, result]);
}
function stripUnits(value)
{
// remove units from '0px', '0em' etc. leave non-zero units in-tact.
return value.replace(/(url\(.*?\)|[^0]\S*\s*)|0(%|em|ex|px|in|cm|mm|pt|pc)(\s|$)/gi, function(_, skip, remove, whitespace) {
return skip || ('0' + whitespace);
});
}
in this code i figured out that the
win.getComputedStyle(element, "")
to get all of the styles of an element, and then with a for loop gets all of the style and prints out. so i think the getComputedSTyle is the main function to use, and after this you can get the props one by one with:
style.getPropertyValue(propName)