Question

我正在尝试将所有样式都设置为内联的“静态”网页。为此，我首先保存所有计算出的样式，然后删除所有应用的样式（类和css文件），检查已保存样式的差异，并为缺少的样式添加内联。这是我的功能：

<!-- Name Column -->
<ng-container matColumnDef="name" sticky>
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<!-- Position Column -->
<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> No. </th>
  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef> Weight </th>
  <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>

它“正常工作”，但是某些样式不正确，因此我需要帮助来查找该代码中缺少的内容。工作示例：http://jsfiddle.net/owecfdr2/

Answer 1

我将不使用内联样式，而是将link元素转换为style元素。您可以像这样进行操作（我坚持使用ES5，因为它看起来像您在代码中所做的一样）：

function linkToStyle(link) {
    var css = [];
    var sheet = link.sheet;
    var rules = sheet.cssRules || sheet.rules;
    for (var i = 0; i < rules.length; ++i) {
        var rule = rules[i];
        css.push(rule.cssText);
    }
    var style = document.createElement("style");
    style.type = "text/css";
    style.appendChild(
        document.createTextNode(css.join("\r\n"))
    );
    return style;
}
document.querySelectorAll("link[rel=stylesheet]").forEach(function(link) {
    var style = linkToStyle(link);
    var parent = link.parentNode;
    parent.insertBefore(style, link);
    parent.removeChild(link);
});

通过从CSS stylesheet object获取link element，找到具有link的所有rel="stylesheet"元素，并将其替换为具有相同CSS文本的style元素，遍历其CSS rules，并使用每个规则的cssText。

misorude在a comment中指出，链接的CSS样式表中的所有URL都是相对于样式表的，而不是相对于链接到样式表的页面的，因此，如果您的样式表和页面不在从URL角度来看同一位置（例如，同一目录），情况会变得更加复杂：您必须调整URL以解决此问题。一个简单的版本将只处理CSSRule.STYLE_RULE类型（即CSSStyleRule）的规则，循环遍历属性以查找和调整URL。（如果有进口的话，它将变得更加复杂。）

该代码依赖于forEach返回的NodeList上的querySelectorAll。现在大多数浏览器都具有这种功能。 this answer显示了如何检测浏览器是否不存在并进行填充。

使html + css页面独立且静态

1 个答案: