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

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

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

我知道这$("#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");
提问于
用户回答回答于

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

热门问答

linux如何限制单一ip对服务器的日访问量?

小爱同学

腾讯云 · 技术支持 (已认证)

推荐
您根据当前网站规模和业务了解下【网站管家 WAF】,企业站点可有效抵御恶意攻击,垃圾访问。 图片.png 您反馈网站短信验证码被盗刷,也可结合自己业务,可自行部署iptables进行手动拦截。或其他方式 例如您的网站是nginx,在web配置文件中开启配置HttpLimitR...... 展开详请

兼容性测试只能上传apk测试的吗?

WeTest质量开放平台团队专注游戏,提升品质
推荐

目前不支持公众号的兼容测试,还请知晓

关于群自动解散的问题?

安稳

腾讯科技 · 工单技术支持 (已认证)

推荐
您好,临时群是没有的。云通信的群组只有私有群(Private)、公开群(Public)、聊天室(ChatRoom)、音视频聊天室(AVChatRoom)和在线成员广播大群(BChatRoom)这五种。 您说的这个需求,思路:创建群组时,服务端记录一下时间,到达约定解散的时间以后,...... 展开详请

腾讯云短信接收方对控制台发出的短信做出回应,比如说回复短信“你好”,控制台是否能收到回复的内容?

您好,国内短信可在 短信控制台->国内短信->统计分析->短信记录->回复记录 查看用户回复的短信。 同时可配置文本短信回复回调,配置后会推送相关回复到用户服务器。 统计分析:https://cloud.tencent.com/document/product/382/18062...... 展开详请

不同账号的三台服务器用内网ping不通?

不同账号的服务器本来就已经独立划分,内网肯定是不通的,公网各自都有自己的公网,通是一定的,具体不同账号内网不通你可以参考私有网络VPC的定义。同地域不同账户的不同 VPC 相互隔离,但可以通过建立 同账户同地域对等连接同账户跨地域对等连接 实现内网互联。

对象存储单个文件大于5GB不能改变存储类型为归档存储,那么我上传的时候可以直接指定为归档存储吗?

Lew

腾讯云对象存储 · 工程师 (已认证)

推荐已采纳

可以的,coscmd upload a.txt a.txt -H "{'x-cos-storage-class':'Archive'}" -H 参数可以添加自定义的header

所属标签

扫码关注云+社区