web-dev-qa-db-fra.com

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

Je sais que $("#divId").html() me donnera innerHtml. J'ai également besoin de ses styles (qui peuvent être définis au moyen de classes) soit en ligne attribut style ou tous les styles/classes au sein d'une balise <style> distincte.

C'est possible?

MISE À JOUR
 Que se passe-t-il si html ressemble à <div id="testDiv">cfwcvb</div> et qu'une classe CSS pour #testDiv est définie dans une feuille de style externe?

MISE À JOUR 2
 Désolé de ne pas avoir clarifié cela plus tôt

Si c'est mon HTML

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

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

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

Ensuite, lorsque j'essaie d'obtenir le code HTML intérieur de $("#divId").html() ou d'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>

UPDATE 3 pour la réponse de kirilloid
J'ai couru ci-dessous le code dans la fenêtre de commande des outils de débogage de Chrome pour this page elle-même et voici 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");
javascriptjquerycssstyles
16
IsmailS

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

usage:

getElementChildrenAndStyles("#divId");
12
kirilloid

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

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

Vous pouvez obtenir un objet de style représentant le style calculé pour un élément en utilisant window.getComputedStyle() dans la plupart des navigateurs et la propriété currentStyle de IE dans IE. Il existe toutefois plusieurs différences entre les navigateurs: les valeurs renvoyées pour les propriétés de raccourci (telles que background), les valeurs RVB couleur, les longueurs et même font-weight (voir cette page de test utile ). Testez soigneusement.

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

alert(computedStyle(document.body).color);
6
Tim Down

Vous pouvez utiliser quelque chose comme ceci 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 ça

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

si vous voulez sauvegarder tout le style d'un élément, je pense que cela sera plus compliqué, car vous pensez tout d'abord, ma première idée était la console css firebug. cela montre tout le style d'un élément et j'ai pensé comment? alors j'ai cherché le code source du firebug et j'ai trouvé ceci:

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

ce code ne fonctionne que sur la partie 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 fonction qui obtient 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 tout le style et s'imprime. Je pense donc que getComputedSTyle est la fonction principale à utiliser. Vous pourrez ensuite obtenir les accessoires un par un avec:

style.getPropertyValue(propName)
3
Gergely Fehérvári

Sur la base de la réponse de kirilloid, j'ai créé une extension pour les outils de développement pour Chrome qui incorpore ce code pour capturer les styles et le balisage d'un fragment de page. L'extension se trouve dans Chrome Web Store et se trouve sur Github . Toutes les options de sortie "Styles d'auteur" utilisent cette méthode pour effectuer une itération sur les feuilles de style.

enter image description here

1
ifugu

Vous pouvez obtenir la feuille de style définie dans les balises de style sous document.styleSheets . Vous pouvez lire les règles dans une carte et les trouver par selectorText. Donc, par id: "#id", par les classes: ".className". En safari ou en chrome, vous pouvez utiliser getMatchedCSSRules .

0
inf3rno

La méthode .css () obtient 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/

0
Víctor B.

Généralement, vous pouvez accéder au paramètre de style à l'aide de .attr ('style'). Si vous souhaitez accéder au style calculé, vous pouvez utiliser window.getComputedStyle (élément) dans Opera, Firefox, Chrome et d'autres navigateurs sains. Pour IE, vous feriez la même chose avec element.currentStyle.

De plus, si vous souhaitez accéder à un style CSS individuel, vous pouvez le faire avec jQuery .css method. Comme si $ ("# divId"). Css ('taille de la police').

0
MeanEYE