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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (67)

我知道这$("#divId").html()会给我innerHtml。我也需要它的样式(可以用类的方法来定义),或者是在线style属性,或者是在一个单独的<style>标签中的所有样式/类。

可能吗?

如果html是<div id="testDiv">cfwcvb</div>#testDiv,外部样式表中定义的css类一样?

这是我的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>

我跑到下面的代码在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");
提问于
用户回答回答于

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

热门问答

腾讯云广州一区DNS变更,需要怎么操作?

思潮澎湃轻描淡写的生活,但思潮澎湃
推荐
我也收到相关的通知了,这里分享下~ 2019年1月31日,腾讯云将对广州地区旧的基础网络DNS服务器(10.225.30.181、10.225.30.223)进行下线。在此期间,腾讯云提供最新的DNS服务器供您更新使用。 我们建议您尽快将DNS服务器配置进行更新,并且我们为您提供...... 展开详请

看到 API 网关已支持前端类型为 WebSocket,有无相关文档?

Masonlu

腾讯 · 产品经理 (已认证)

推荐已采纳
websocket的demo模板已经上了前台,今天会全网发布,相关文档也在审核当中,我这里先把它贴到附件里,供参考。 Websocket 原理介绍.pdf Websocket 使用方法.pdf 届时,可以通过控制台选择demo直接创建ws的云函数。... 展开详请

一个用户加入多个群组,发现不同群组间消息互窜,怎么解决?

LemonLu

社区 · 运营 (已认证)

Less is more
推荐

在解析的时候需要根据群组ID处理,因为不同的群组消息有不同的群组ID的。

COS Javascript 上传图片putObject成功后没有返回ETag?

许金泉

腾讯 · 高级工程师 (已认证)

腾讯云COS前端开发
推荐

腾讯云通讯能做类似qq微信的语音通话的效果吗?

推荐

腾讯云通信IM只支持发送语音功能

如果需要实现语音通话功能可以集成实时音视频来实现

详情请参考https://cloud.tencent.com/product/trtc

腾讯云50G系统盘,购买的数据盘在挂载后没有D盘符只有E盘符,如何设置D盘符?

推荐
已购买数据盘的用户,需要格式化数据盘才可使用。 格式化数据盘 1. 登录 Windows 云服务器。 2. 单击【开始】-【服务器管理器】-【工具】-【计算机管理】-【存储】-【磁盘管理】。 3. 在磁盘 1 上右键单击,选择【联机】: 📷 4. 右键单击,选择【初始化磁盘】:...... 展开详请

所属标签

扫码关注云+社区