jQuery - 如何使用元素的 HTML 获取所有样式/css（在内部/外部文档中定义）

Posted 2023-02-22

【中文标题】jQuery - 如何使用元素的 HTML 获取所有样式/css（在内部/外部文档中定义）

【英文标题】：jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element

【发布时间】：2011-06-14 11:06:39

【问题描述】：

我知道$("#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 我在 this 页面本身的 Chrome 调试器工具的命令行窗口中运行了下面的代码，这就是我看到的 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");

【问题讨论】：

我认为你的标题应该是“如何获得所有样式..”，这也是类似的：***.com/questions/754607/…

你能告诉为什么你到底需要这个吗？也许有一种简单的方法可以做到这一点。

因为我正在将元素的 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");

【讨论】：

感谢您的回答。我试过你回答的。我已经用我尝试过的输出更新了我的问题。我对您回答的内容进行了一个小改动，即 $(selector).get(0).outerHTML 来自 $(selector).outerHTML()，这样我就不需要 outerHTML。

有一个愚蠢的错误——我已经修复了它（并在我的帖子中编辑了代码）。但是我遇到了另一个问题：安全性。在大多数浏览器中，无法通过 DOM（即我使用的方式）从另一个域访问 CSS。在*** CSS文件放在sstatic.net/***我已经用“#ibm-search-form”测试了ibm.com/us/en/sandbox/ver2的更改示例并且它可以工作，但是你需要在函数的开头添加var $ = jQuery;，为了在@ibm.com 工作

谢谢，你一定会得到你应得的赏金。干得漂亮。不过还有一个错误。当我按照您提供的链接进行测试时，它缺少http:。

请注意，cssText 似乎不包含元素可能具有的任何自定义样式。大多数时候这不是问题，但就我自己的工作而言，这是我需要知道的。

如何通过类名分组获取样式？

【参考方案2】：

根据 kirilloid 的回答，我为 Chrome 创建了一个开发人员工具扩展，其中包含用于捕获页面片段样式和标记的代码。扩展名在Chrome Web Store 和Github 上。所有“作者样式”输出选项都使用该方法迭代样式表。

【参考方案3】：

您可以获取document.styleSheets 下的样式标签内定义的样式表。您可以将规则读入地图，并通过 selectorText 找到它们。所以通过 id：“#id”，通过类：“.className”。通过 safari 或 chrome 你可以使用getMatchedCs-s-rules。

【参考方案4】：

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

【讨论】：

我需要像 ` ` 即使它们是在单独的样式表中定义的。然后html标记

【参考方案5】：

如果你想保存一个元素的所有样式，我认为这会像你想的那样复杂 首先，我的第一个 ide 是 firebug css 控制台。这显示了一个元素的所有风格，我想怎么做？ 所以我搜索了萤火虫的源代码，我发现了这个：

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, 'onCs-s-rulesAdded', [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)

【参考方案6】：

您可以在大多数浏览器中使用window.getComputedStyle() 和IE 中元素的currentStyle 属性来获取表示元素计算样式的样式对象。然而，浏览器的不同之处在于快捷方式属性（例如background）、颜色RGB 值、长度甚至font-weight（请参阅this useful test page）的返回值。仔细测试。

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


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

【讨论】：

我已经更新了我的问题，以防万一之前不清楚。

【参考方案7】：

你可以在脚本中使用这样的东西：-

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

【讨论】：

其他浏览器是否支持控制台？无论如何+1

并非所有浏览器都支持控制台，但您可以作为替代品使用

如果分配了一个类并且该类在不同的 css 文件中定义怎么办？

谢谢，但如果它不支持所有浏览器，那么它对我不起作用。

控制台只是知道你可以将它存储在一个变量中并在任何你想要的地方使用它......

【参考方案8】：

通常您可以使用 .attr('style') 访问样式参数。如果您想访问计算样式，您可以在 Opera、Firefox、Chrome 和其他健全的浏览器中使用 window.getComputedStyle(element)。对于 IE，你可以对 element.currentStyle 做同样的事情。

此外，如果您希望访问单个 CSS 样式，您可以使用 jQuery .css 方法来实现。就像这样 $("#divId").css('font-size')。

【参考方案9】：

.css()方法获取元素的特定样式……不知道能不能检索到所有样式：

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