jQuery - Comment obtenir tous les styles / css (définis dans le document interne / externe) avec HTML d'un élément

Je sais que $("#divId").html() va me donner innerHtml. J'ai aussi besoin de son style (ce qui pourrait être défini par le biais de classes), soit en ligne style attribut ou tous les styles/classes au sein d'un distinct <style> tag.

Est-il possible?

Mise à JOUR

Que faire si le html est comme <div id="testDiv">cfwcvb</div> et une classe css pour #testDiv est défini dans la feuille de style externe?

Mise à JOUR 2

Désolé de ne pas clarifier cette plus tôt

Si c'est mon code HTML

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

Et les styles sont définis dans la feuille de style séparée ou dans la tête les styles.

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

Puis, quand j'essaie d'obtenir intérieure html de $("#divId").html() ou appeler une autre fonction personnalisée, j'ai besoin de quelque chose comme ci-dessous

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

Mise à JOUR 3 pour Répondre par kirilloid

J'ai couru code ci-dessous dans la Fenêtre de Commande de Chrome Débogueur outils pour cette page elle-même et c'est ce que je vois 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 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[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");

source d'informationauteur IsmailS

  1. 12

    outerHTML (pas sûr, vous en avez besoin — juste au cas où)

    Limitations: CSSOM est utilisé et les feuilles de style doivent être de la même origine.

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

    utilisation:

    getElementChildrenAndStyles("#divId");
  2. 8

    Pas de jQuery et pas d'IE de soutien, c'est tout ce que je peux faire:

    jQuery - Comment obtenir tous les styles /css (définis dans le document interne /externe) avec HTML d'un élément

    <!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>
  3. 6

    Vous pouvez obtenir un style d'objet représentant le calcul de style d'un élément à l'aide de window.getComputedStyle() dans la plupart des navigateurs et de l'élément currentStyle propriété dans IE. Il y a plusieurs différences de navigateurs, cependant, avec des valeurs retournées pour les propriétés de raccourci (comme background), RVB de la couleur de valeurs, de longueur et de même font-weight (voir ce test utile de page). Test avec soin.

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

    Vous pouvez utiliser quelque chose comme cela pour le 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>

    et html simple serait comme cette

    <div style="border:1px solid red;" id="testDiv">cfwcvb</div>
  5. 3

    si vous souhaitez enregistrer tous les style d'un élément, je pense que ce sera plus compliqué que vous le pensez
    tout d'abord mon premier ide a été firebug css de la console. cela montre toutes les fo le style d'un élément et j'ai pensé comment?
    j'ai donc cherché pour le code source de la firebug et j'ai trouvé ceci:

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

    ce code en travaillant uniquement sur le css de la partie.

    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 fonction qui récupère tous les 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);
});
}

    dans ce code, j'ai compris que le 

    win.getComputedStyle(element, "")

    pour obtenir tous les styles d'un élément, puis avec une boucle for obtient tous les style et les imprime. je pense donc que le getComputedSTyle est la principale fonction de l'utilisation, et après cela, vous pouvez obtenir les accessoires, un par un avec:

    style.getPropertyValue(propName)
  6. 1

    Basé sur kirilloid réponse, j'ai créé un développeur d'outils d'extension pour Chrome qui intègre qui code pour la capture de styles et de balisage d'un fragment de page. L'extension est dans la Chrome Web Store et est sur Github. Tous les Auteur de "Styles" options de sortie utilisation de cette méthode pour itérer sur les feuilles de style.

    jQuery - Comment obtenir tous les styles /css (définis dans le document interne /externe) avec HTML d'un élément

  7. 0

    L' .css() méthode permet d'obtenir un style particulier de l'élément... je ne sais pas si vous pouvez récupérer tous les styles:

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

  8. 0

    En général, vous pouvez accéder paramètre de style à l'aide .attr('style'). Si vous souhaitez accéder calculé le style, vous pouvez utiliser la fenêtre.getComputedStyle(élément) dans Opera, Firefox, Chrome et d'autres sane navigateurs. Pour IE vous feriez la même chose avec l'élément.currentStyle.

    Aussi, si vous souhaitez accéder individuelle de style CSS, vous pouvez le faire avec jQuery .css méthode. Comme $("#divId").css('font-size').

  9. 0

    Vous pouvez obtenir la feuille de style définie à l'intérieur de balises de style sous document.les feuilles de style. Vous pouvez lire les règles dans une carte, et de les trouver par selectorText. Par id: "#id", par classes: ".className". Par safari ou chrome, vous pouvez utiliser getMatchedCSSRules.