На html-странице мы можем управлять стилевыми свойствами любого элемента через его свойство и атрибут style. Либо использовать классы в виде свойств className или classList. Но что делать, если необходимо управлять стилевыми таблицами? Как их создать, добавить или изменить свойство или правила для какого-либо селектора? Вот тут и пригодятся свойства и методы, которые предоставляет JavaScript.
Создаем тег style с помощью JavaScript
На самом деле этот способ связан свозможностью создания любых элементов в DOM-структуре html-страницы. Основан он на методе document.createElement:
| 1 2 3 | let style = document.createElement("style"); style.innerHTML = "div { font-size: 1.3rem; margin: 10px 30px;}"; document.head.appendChild(style); |
Рзница состоит в том, что здесь мы добавляем элемент style не в document.body, а в document.head. В результате в DOM-структуре внутри тега <head> создается тег <style> с записанными нами правилами.
Создаем тег link с помощью JavaScript
Аналогично предыдущему способу мы можем создать тег <link> и добавить к нему ссылку на определенный css-документ. Это особенно актуально, если вы хотите подключить стили какого-либо фреймворка, которые обычно доступны на CDN.
Например, так:
See the Pen Add stylesheet link by JS by Elen (@ambassador) on CodePen.
Здесь при нажатии на кнопку "Add stylesheet" вызывается функция, которая проверяет, есть ли переданная ссылка уже в виде таблице стилей в данном документе. Если ее нет, то добавляет тег link. При повторном клике на той же кнопке ничего не происходит, т.к. та же проверка уже такую таблицу стилей находит и выдает сообщение в консоль.
Свойство document.styleSheets
Согласно документации на MDN:
The
styleSheetsread-only property of theDocumentinterface returns aStyleSheetListofCSSStyleSheetobjects, for stylesheets explicitly linked into or embedded in a document.Свойство styleSheets объекта Document доступно только для чтения и возвращает список стилей объектов CSSStyleSheet для таблиц стилей, явно связанных с документом или встроенных в него.
Благодаря свойству document.styleSheets мы можем получить все данные из таблицы стилей, как подключенной к html-документу тегом link, так и описанных в тегах <style>. Каждая таблица стилей имеет индекс, который присваивается ей в зависимости от места, которое она занимает в вашей разметке.
В примере ниже мы просто выводим стили, которые назначены для текущего html-документа в первой стилевой таблице:
| 1 2 3 4 5 | let myRules = document.styleSheets[0].cssRules, div = document.querySelector(".output"); for (let rule of myRules) { div.innerHTML += `<code>${rule.cssText}</code><br>`; } |
Для того чтобы добавлять правила в таблицу стилей, вы можете использовать метод styleSheet.insertRule(), передав в качестве параметра строку в виде селектора и правил для него. Также вы можете указать индекс, или номер правила в методе styleSheet.insertRule('rule', index).
Для того чтобы удалить css-правило, можно использовать метод styleSheet.deleteRule(index), где index - это номер правила.
В примере ниже вы можете нажать на кнопки, чтобы добавить CSS-правило для кнопок или удалить правило с индексом 0. Если вы удалите все существующие в таблице стилей правила, то свойство styleSheet.cssRules.length(т.е. количество правил) станет равно 0, и дальнейшее удаление свойств будет невозможно. В этом случае вы получите предупреждение в виде диалогового окна alert().
See the Pen Stylesheets in JS by Elen (@ambassador) on CodePen.
Удаление стилевых таблиц
В том случае, если вы задали тегу <link> атрибут id, то удаление будет очень простым:
| 1 2 3 4 | const removedSheet = document.getElementById('linkId'); removedSheet.remove(); //либо можно просто удалить все свойства removedSheet.sheet.cssText = ""; |
Однако атрибут id тегу <link> задают не так часто. Поэтому для удаления тега <link> без id необходимо в его атрибуте href найти часть строки, соответствующую названию вашего файла с css-стилями. Например, так:
See the Pen Remove stylesheet link by JS by Elen (@ambassador) on CodePen.
В файле примера подключены 2 внешние стилевые таблицы - bootstrap.css и hover.css. При клике на кнопке вверху вы удалите bootstrap.css, а стили для анимации кнопок останутся.
Можно не удалять таблицу стилей, а просто отключить ее. Для этого для нее или для тега <link> можно добавить атрибут disabled. При клике на вторую кнопку в примере выше вы отключаете таким образом стили из hover.css.
