Измените правила в таблице стилей CSS с помощью JavaScript - PullRequest
Новая
       13

Измените правила в таблице стилей CSS с помощью JavaScript

0 голосов
/ 02 мая 2018

Я хотел бы динамически изменять правила класса в коде (используя 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 , чтобы я мог изменить его свойства?

Примечание: Я НЕ хочу использовать document.querySelector ('#. Grid.grid-radial'). SetAttributes ("style", ...)

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете получить доступ к таблицам стилей, связанным со страницей, через свойство 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-файл опубликован на вашем веб-сайте (например, для сопоставления источника), его изменение не повлияет на сайт.

...