getMatchedCSSRules

ю это$("#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");
 gblazex03 февр. 2011 г., 13:40
ты можешь сказатьПочему тебе это точно нужно? возможно, есть простой способ сделать это.
 thirtydot24 янв. 2011 г., 12:34
Я думаю, что ваш заголовок должен быть "Как получить все стили ..", также это похоже:stackoverflow.com/questions/754607/...
 IsmailS07 февр. 2011 г., 21:09
Потому что я копирую html элемента из одного документа в документ другого окна, который является iFrame.

Ответы на вопрос(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");
 yenkay17 авг. 2017 г., 13:57
Как получить стили с группировкой имен классов?
 Perry Monschau25 февр. 2015 г., 15:26
Обратите внимание, что cssText, похоже, не содержит никаких пользовательских стилей, которые может иметь элемент. В большинстве случаев это не будет проблемой, но с тем, над чем я сам работаю, это то, что мне нужно было знать.
 IsmailS09 февр. 2011 г., 08:51
Спасибо, вы обязательно получите заслуженную награду. Хорошо выполненная работа. Еще одна ошибка, хотя. его не хватаетhttp: когда я проверил, как вы имели по ссылке, которую вы дали.
 IsmailS08 февр. 2011 г., 12:16
Спасибо за ответ. Я попробовал то, что вы ответили. Я обновил свой вопрос с выводом того, что я пытался. Я внес небольшое изменение в то, что вы ответили:$(selector).get(0).outerHTML из$(selector).outerHTML() так что мне не нужноouterHTML.
 kirilloid08 февр. 2011 г., 12:56
Была одна глупая ошибка - я исправил это (и отредактировал код в моем посте). Но тогда у меня есть другая проблема: безопасность. В большинстве браузеров невозможно получить доступ к CSS через DOM (то есть, как я использую) из других доменов. На stackoverflow CSS файл помещается наsstatic.net/stackoverflow Я протестировал измененный пример наibm.com/us/en/sandbox/ver2 с "# ibm-search-form", и это работает, но вам нужно будет добавитьvar $ = jQuery; в начале функции, чтобы работать в @ ibm.com

Ваш ответ на вопрос