在Chrome擴展程序中將CSS屬性作為JavaScript注入，而不覆蓋以前的屬性

Question

因此，我嘗試在chrome擴展程序中執行以下代碼行：

  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "font-family: Courier !important");}'
  });
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "font-size: 18pt !important");}'
  });
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "backgrond-color: #fbfbfb !important");}'
  });
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "line-height: 1.5 !important");}'
  });

問題是，每行將覆蓋最后一行的CSS更改。 我可以通過將所有CSS更改放在一行中來解決此問題。 但是，我想根據變量的狀態使每行工作。 例如：

if (var_a === "true") {
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "font-family: Courier !important");}'
  });
}
if (var_b === "true) {
  chrome.tabs.executeScript({
    code: 'var elements = document.getElementsByTagName("*"); for (var i=0; i < elements.length; i++) { elements[i].setAttribute("style", "font-size: 18pt !important");}'
  });
}

我該怎么做？

Answer 1

應用樣式更改之前，請將樣式更改收集到一個位置。

var style = "";
if (var_a === "true") style += "font-family: Courier !important;";
if (var_b === "true") style += "font-size: 18pt !important;";
/* ... */
chrome.tabs.executeScript({
  code:
    'var elements = document.getElementsByTagName("*");' +
    'for (var i=0; i < elements.length; i++) {' + 
      'elements[i].setAttribute("style", "' + style + '");' +
    '}'
});

---

或者，您可以直接操作.style屬性而不是屬性。 例如：

elements[i].style.setProperty("font-family", "Courier", "important");

在不覆蓋的情況下一一操作規則。