web-dev-qa-db-ja.com

jQuery-要素のHTMLですべてのスタイル/ CSS（内部/外部ドキュメント内で定義）を取得する方法

$("#divId").html()がinnerHtmlを与えることを知っています。また、インラインstyle属性または別の_<style>_タグ内のすべてのスタイル/クラスのいずれかのスタイル（クラスによって定義される場合があります）も必要です。

出来ますか？

更新
HTMLが_<div id="testDiv">cfwcvb</div>_のようなものであり、_#testDiv_のcssクラスが外部スタイルシートで定義されている場合はどうなりますか？

更新2
これを以前に明確にしていないため申し訳ありません

これが私のHTMLの場合

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

また、スタイルは個別のスタイルシートまたはヘッドスタイルで定義されます。

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

次に、$("#divId").html()の内部HTMLを取得するか、他のカスタム関数を呼び出そうとすると、以下のようなものが必要になります

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

kirilloidによる回答の更新3
コマンドウィンドウでChrome Debugger tools for this ページ自体）のコードの下を実行しましたが、これは私が目にするものです_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
18
IsmailS

outerHTML （わからない、必要な場合-念のため）

制限： [〜＃〜] cssom [〜＃〜] が使用され、スタイルシートは同じオリジンからのものである必要があります。

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

使用法：

getElementChildrenAndStyles("#divId");
12
kirilloid

JQueryなし、IEサポートなし、それが私ができるすべてです：

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

ほとんどのブラウザーで window.getComputedStyle() を使用して要素の計算されたスタイルを表すスタイルオブジェクトと要素の currentStyle プロパティを取得できますIEで。ただし、ブラウザの違いはいくつかありますが、ショートカットプロパティに返される値（backgroundなど）、カラーRGB値、長さ、さらにはfont-weight（ この便利なテストページ を参照）。慎重にテストしてください。

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

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

スクリプトには次のようなものを使用できます：-

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

シンプルなhtmlはこのようになります

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

要素のすべてのスタイルを保存したい場合は、最初に私の最初のアイデアがfirebug css consoleだったと思うので、これはより複雑になると思います。これはすべての要素のスタイルを示し、私はどう思いましたか？だから私はファイアバグのソースコードを検索し、これを見つけました：

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

このコードは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"
    ]
};

すべてのスタイルを取得する関数。

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

このコードでは、

win.getComputedStyle(element, "")

要素のすべてのスタイルを取得し、forループですべてのスタイルを取得して出力します。だから私はgetComputedSTyleが使用するメイン関数だと思います、そしてこの後あなたは次のようにして小道具を一つずつ得ることができます：

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

Kirilloidの答えに基づいて、Chromeの開発者ツール拡張機能を作成しました。これは、ページフラグメントのスタイルとマークアップをキャプチャするためのコードを組み込んでいます。拡張機能は Chrome Web Storeにあります and on on Github 。すべての "Author Styles"出力オプションは、その方法を使用してスタイルシートを反復します。

enter image description here

1
ifugu

document.styleSheets のスタイルタグ内で定義されたスタイルシートを取得できます。ルールをマップに読み込んで、selectorTextで検索できます。したがって、IDごとに「#id」、クラスごとに「.className」を使用します。サファリまたはchromeを使用すると、 getMatchedCSSRules を使用できます。

0
inf3rno

.css（）メソッドは要素の特定のスタイルを取得します...すべてのスタイルを取得できるかどうかはわかりません。

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

0
Víctor B.

通常、.attr（ 'style'）を使用してスタイルパラメータにアクセスできます。計算されたスタイルにアクセスする場合は、Opera、Firefox、Chromeおよびその他の正常なブラウザ）でwindow.getComputedStyle（element）を使用できます。IE element.currentStyleでも同じことを行います。

また、個々のCSSスタイルにアクセスする場合は、jQuery 。cssメソッドを使用してアクセスできます。そうです$（ "＃divId"）。css（ 'font-size'）。

0
MeanEYE