Question

是否有可以从HTML中提取样式的JavaScript库？

例如;给定以下html，它将输出一个样式元素，其中包含应用于每个元素的所有计算样式？

...输入

<div class="container no-wrap">

    <p>foo</p>

    <footer class="thumbnail">
        <span>bar</span>
    </footer>
</div>

...输出

// The library/utility has inspected all elements and discovered all styling applied 
// to the elements and the classes
<style type="text/css">

    div {
        margin: 0;
        background-color: red;
    }

    p {
        font-size: 16px;
        font-family: arial;
    }

    span {
        color: #fff;
    }

    footer {

    }

    .container {
        ...
    }

    .no-wrap {
        ....
    }

    .thumbnail {
        ...
    }
</style>

Answer 1

不需要库。您可以迭代每个document.styleSheets的{{1}}和.rules属性，以获取CSSStyleSheet和.selectorText属性

＆＃13;

.cssText

＆＃13;

for (let sheet of document.styleSheets) {
  for (let rules of sheet.rules) {
    let {selectorText, cssText} = rules;
    console.log(selectorText, cssText)
  }
}

＆＃13;

Answer 2

如果您尝试获取document中每个元素的计算属性，并且在元素中设置了每个属性和值，则可以使用Object.entries()和window.getComputedProperty()

for (let element of document.querySelectorAll("*")) {
  for (let [key, prop] of Object.entries(window.getComputedStyle(element))) {
    console.log(element.tagName, element.id, element.className, key, prop)
  }
}

<style>
  div {
    color: blue;
  }
</style>

用于提取相关CSS的JavaScript库

2 个答案: