jQuery – Cómo get todos los styles / css (definidos en documento interno / externo) con HTML de un elemento

Sé que $("#divId").html() me dará innerHtml. También necesito sus styles (que pueden definirse por medio de classs), ya sea un atributo de style en línea o todos los styles / classs dentro de una label <style> separada.

¿Es posible?

ACTUALIZAR
¿Qué <div id="testDiv">cfwcvb</div> si html es como <div id="testDiv">cfwcvb</div> y se define una class css para #testDiv en una hoja de estilo externa?

ACTUALIZACIÓN 2
Perdón por no aclarar esto antes

Si este es mi HTML

 <div id="divId"> <span class="someClass">Some innerText</span> </div> 

Y los styles se definen en hojas de estilo separadas o en styles de cabezales.

 #divId { clear: both; padding: 3px; border: 2px dotted #CCC; font-size: 107%; line-height: 130%; width: 660px; } .someClass { color: blue; } 

Luego, cuando trato de get html interno de $("#divId").html() o llamar a cualquier otra function personalizada, necesito algo como lo siguiente

 <style> #divId { clear: both; padding: 3px; border: 2px dotted #CCC; font-size: 107%; line-height: 130%; width: 660px; } .someClass { color: blue; } </style> <div id="divId"> <span class="someClass">Some innerText</span> </div> 

ACTUALIZACIÓN 3 para Answer by kirilloid
Corrí por debajo del código en la window de commands de las herramientas del depurador de Chrome para esta página y esto es lo que veo TypeError: Cannot read property 'rules' of undefined

 function getElementChildrenAndStyles(selector) { var html = $(selector).get(0).outerHTML; selector = selector.split(",").map(function(subselector){ return subselector + "," + subselector + " *"; }).join(","); elts = $(selector); var rulesUsed = []; // main part: walking through all declanetworking 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[i].rules || sheets[i].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(CSSrule); break; } } } } var style = rulesUsed.map(function(cssRule){ if ($.browser.msie) { 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; }; getElementChildrenAndStyles(".post-text:first"); 

outerHTML (no estoy seguro, lo necesitas, por las dudas )

Limitaciones: se usa CSSOM y las hojas de estilo deben ser del mismo origen.

 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 declanetworking 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; } 

uso:

 getElementChildrenAndStyles("#divId"); 

Sin jQuery y sin soporte de IE, eso es todo lo que puedo hacer:

enter image description here

 <!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> 

Puede get un object de estilo que representa el estilo calculado para un elemento usando window.getComputedStyle() en la mayoría de los browseres y la propiedad currentStyle del elemento en IE. Sin embargo, existen varias diferencias de browser con valores devueltos para properties de acceso directo (como background ), valores RGB de color, longitudes e incluso font-weight (consulte esta página de testing útil ). Prueba cuidadosamente

 function computedStyle(el) { return el.currentStyle || window.getComputedStyle(el, null); } alert(computedStyle(document.body).color); 

Puede usar algo como esto para el guión:

 <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> 

y html simple sería como esto

 <div style="border:1px solid networking;" id="testDiv">cfwcvb</div> 

si quieres save todo el estilo de un elemento, creo que esto será más complicado ya que, en primer lugar, piensas que mi primer ide fue la console firebug css. esto muestra todo el estilo de un elemento y pensé ¿cómo? así que busqué el código fuente del firebug y encontré esto:

http://fbug.googlecode.com/svn/branches/firebug1.7/content/firebug/css.js

este código funciona solo en la parte css.

 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" ] }; 

la function que obtiene todos los 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); }); } 

en este código, descubrí que el

 win.getComputedStyle(element, "") 

para get todos los styles de un elemento, y luego con un bucle for obtiene todo el estilo e imprime. entonces creo que getComputedSTyle es la function principal a usar, y después de esto puedes get los accesorios uno por uno con:

 style.getPropertyValue(propName) 

Basado en la respuesta de kirilloid, creé una extensión de herramientas para desarrolladores para Chrome que incorpora ese código para capturar styles y marcas para un fragment de página. La extensión está en Chrome Web Store y está en Github . Todas las opciones de salida "Estilos de autor" usan ese método para iterar sobre las hojas de estilo.

enter image description here

El método .css () obtiene un estilo particular del elemento … No sé si puede recuperar todos los styles:

http://api.jquery.com/css/

En general, puede acceder al parámetro de estilo usando .attr ('estilo'). Si desea acceder al estilo calculado, puede usar window.getComputedStyle (element) en Opera, Firefox, Chrome y otros browseres. Para IE, harías lo mismo con element.currentStyle.

Además, si desea acceder al estilo CSS individual, puede hacerlo con el método jQuery .css . Al igual que $ ("# divId"). Css ('font-size').

Puede get la hoja de estilo definida dentro de las tags de estilo en document.styleSheets . Puede leer las reglas en un map y searchlas mediante selectorText. Entonces, por id: "#id", por classs: ".className". Por safari o chrome puede usar getMatchedCSSRules .