jQuery - Как получить все стили / CSS (определенные во внутреннем / внешнем документе) с HTML элемента

Question

Я знаю, что $("#divId").html() даст мне innerHtml.Мне также нужны его стили (которые могут быть определены с помощью классов), либо встроенный атрибут style, либо все стили / классы в отдельном теге <style>.

Возможно ли это?

ОБНОВЛЕНИЕ Что если html похож на <div id="testDiv">cfwcvb</div>, а класс css для #testDiv определен во внешней таблице стилей?

ОБНОВЛЕНИЕ 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;
}

Затем, когда я пытаюсь получить внутренний html $("#divId").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>

ОБНОВЛЕНИЕ 3 для ответа от kirilloid Я запустил код ниже в окне команд инструментов Chrome Debugger для самой этой страницы, и вот что я вижу 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");

Answer 1

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

Answer 2

Нет jQuery и нет поддержки IE, вот и все, что я могу сделать:

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

Answer 3

Вы можете получить объект стиля, представляющий вычисленный стиль для элемента, используя window.getComputedStyle() в большинстве браузеров и свойство currentStyle элемента в IE. Однако есть несколько отличий браузера от значений, возвращаемых для свойств ярлыка (таких как background), значений цветового RGB, длины и даже font-weight (см. эту полезную тестовую страницу ). Проверьте внимательно.

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

alert(computedStyle(document.body).color);

Answer 4

Вы можете использовать что-то вроде этого для скрипта: -

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

Answer 5

если вы хотите сохранить весь стиль элемента, я думаю, что это будет сложнее, чем вы думаете Во-первых, моим первым идеем была консоль firebug css. это показывает все для стиля элемента, и я подумал, как? поэтому я искал исходный код firebug и нашел это:

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)

Answer 6

Основываясь на ответе kirilloid, я создал расширение для инструментов разработчика для Chrome, которое включает этот код для захвата стилей и разметки для фрагмента страницы.Расширение находится в Chrome Web Store и находится на Github .Все параметры вывода «Авторские стили» используют этот метод для перебора таблиц стилей.

Answer 7

Вы можете получить таблицу стилей, определенную внутри тегов стиля, под document.styleSheets . Вы можете прочитать правила в карте и найти их с помощью selectorText. Так по id: "#id", по классам: ".className". Для Safari или Chrome вы можете использовать getMatchedCSSRules .

Answer 8

Как правило, вы можете получить доступ к параметру стиля, используя .attr ('style'). Если вы хотите получить доступ к вычисляемому стилю, вы можете использовать window.getComputedStyle (элемент) в Opera, Firefox, Chrome и других здравомыслящих браузерах. Для IE вы бы сделали то же самое с element.currentStyle.

Также, если вы хотите получить доступ к индивидуальному стилю CSS, вы можете сделать это с помощью метода jQuery .css . Например, $ ("# divId"). Css ('font-size').

Answer 9

Метод .css () получает определенный стиль элемента ... Я не знаю, можно ли получить все стили:

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