使用 javascript 將 css styles 轉換為內聯 styles

Question

我們有一個企業內容管理系統，允許進行富文本編輯/html 標記，但不允許上傳、附加或以任何方式使用頭部元素或樣式表。 它提供了一些富文本編輯控件，還可以訪問源代碼 html，但僅針對 html 片段——沒有頭部，沒有主體。 我們也無法訪問在頁面上顯示這些標記位的整個系統。 設置內容樣式的唯一方法是通過元素上的內聯樣式屬性。 這是最好的，它並不漂亮，但這就是我們所擁有的，我正在努力在糟糕的情況下做到最好。

我們對視覺呈現也有很高的標准，並希望能夠快速生成和修改/更新內容並保持其美觀。 使用系統很難正確應用格式。 對於任何試圖用 RTE 標記超過一兩段的內容的人，你可能知道我的意思。 看起來我們應該有一個不同的系統，但是以前有人在大公司工作過嗎？ 只是在說。

我們確實可以訪問另一個位置，我們可以在其中“創作”和“存儲”實際樣式的內容，然后“編譯”以將其復制到另一個系統中。 換句話說，我們可以使用 css 和最佳實踐進行創作/設計，然后我們可以運行一些可以將這些元素 class 和 id 格式轉換為內聯 styles 的代碼。

我做了我的研究，發現這個線程也引導我找到這個代碼。

這兩者對於探索解決方案都非常有幫助，但我遇到了一個問題。 這些解決方案使用 javascript getComputedStyle()方法。 屬性還有一些其他選項可以僅查看其他屬性或對元素提供的子元素進行遞歸，但基本上可以歸結為這一點。 （由於 getComputeStyle 返回 object 而不是數組，因此還有一個原型/polyfill 允許使用 forEach 迭代 object，但這些都不是我面臨的問題的一部分。）

常量計算樣式 = 獲取計算樣式（元素）； computedStyle.forEach(property => { element.style[property] = computedStyle.getPropertyValue(property); });

這適用於 css 屬性，如font-size:24px或margin:0 15px 。 我遇到的問題是當我使用 px 以外的單位時。 例如，如果我正在嘗試制作具有width:50%的東西。 getComputedStyle() 將 50% 轉換為 50% 當前使用的實際像素數。

在MDN web 文檔的注釋部分中，我看到這是預期的行為。 雖然我不太清楚最后一行是什么意思。

...布局前和布局后值之間的示例差異包括寬度或高度百分比的分辨率，因為這些將被替換為僅用於使用值的像素等效值。

所以我想做的是轉換這樣的東西

.container{width:50%;}

<div class="container">

變成這樣的東西

<div class="container" style="width:50%">

有誰知道完成這種轉換的方法？

PS：如果重要的話，我們將在 css 中使用更基本的屬性——沒有過渡、網格、前綴等。我們仍然需要支持 IE 11——如果這能告訴你什么的話。 我們不需要考慮每個邊緣案例或瀏覽器。 只是一些基本的東西，讓我們所有的 H1 看起來都一樣。

Answer 1

使用內置的getComputedStyle()找不到任何方法來執行此操作。 它還返回了太多我不感興趣的屬性。所以我想出了一個不同的方法。 基本上使用相同的 function 循環遍歷一個元素（可能還有它的所有子元素）並使用Element.matches()來獲取所有適用於元素的 css 規則並應用樣式表中指定的屬性。

我稍微修改了這個答案以從樣式表中獲取規則。

具有額外的好處，我們可以從所有文檔樣式表中提取，或者僅從將代碼准備到 go 所需的特定樣式表中提取到我們的內容管理系統的富文本編輯器中。

function applyInline(element, recursive = true) {

  if (!element) {
    throw new Error("No element specified.");
  }

  const matches = matchRules(element);

  // we need to preserve any pre-existing inline styles.
  var srcRules = document.createElement(element.tagName).style;
  srcRules.cssText = element.style.cssText;

  matches.forEach(rule => {
    for (var prop of rule.style) {

      let val = srcRules.getPropertyValue(prop) || rule.style.getPropertyValue(prop);
      let priority = rule.style.getPropertyPriority(prop);

      element.style.setProperty(prop,val,priority);
    }
  });

  if (recursive) {
    element.children.forEach(child => {
      applyInline(child, recursive);
    });
  }
}

function matchRules(el, sheets) {
  sheets = sheets || document.styleSheets;
  var ret = [];

  for (var i in sheets) {
    if (sheets.hasOwnProperty(i)) {
      var rules = sheets[i].rules || sheets[i].cssRules;
      for (var r in rules) {
        if (el.matches(rules[r].selectorText)) {
          ret.push(rules[r]);
        }
      }
    }
  }
  return ret;
}