使用JavaScript更改CSS樣式表中的規則

Question

我想在代碼中動態地修改類的規則 （使用JavaScript）。 我有一個styles.scss文件，其中有一個.grid.grid-radial類。 我想使用JavaScript向該類添加和刪除規則。

.grid.grid-radial {
  background-image: -webkit-repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(160, 160, 160, .6), rgba(160, 160, 160, .6) 1px, transparent 1px, transparent 100%);
}

我明白，我可以使用insertRule（）和deleteRule（） ，但我是什么叫他們嗎？

如何獲得對styles.scss文件的引用，以便可以修改其屬性？

注：（ '＃grid.grid徑向'）。我不想使用document.querySelector setAttributes（ “風格”，...）

Answer 1

您可以通過document.styleSheets屬性訪問與頁面關聯的樣式表。 您可以通過匹配完整的href路徑來搜索特定的樣式表，如下所示：

const sheet = Array.from(document.styleSheets).find(s => s.href === 'https://mywebsite.com/css/mySheet.css');

如果您確信不會重復，則可以通過更改查找功能以使用簡稱來使自己更輕松：

const sheet = Array.from(document.styleSheets).find(s => s.href.includes('mySheet.css');

如前所述，您可以從那里調用sheet.insertRule和sheet.deleteRule。

要注意的一件事是瀏覽器本身無法本地解釋SASS / LESS文件。 在構建步驟中應該發生的是，將scss文件編譯為一個css文件，以供瀏覽器讀取。 您需要以該css文件為目標來修改規則-即使該scss文件已發布到您的網站（例如，用於源映射），對其進行更改也不會影響該網站。