Приложение 1: Стили CSS

`getComputedStyle(element[, pseudoElt])` позволяет получить стиль элемента и псевдоэлемента

С помощью getComputedStyle(element[, pseudoElt]) можно узнать окончательное значение свойства CSS (искл. обобщённые свойства, например, font, background, border), приведённое из %, em и др. единиц измерения в px. Свойство может быть записано через свойство JS (символ после тире пишется слитно с большой буквы, например, fontSize, backgroundImage, borderTopStyle, полный список: ) или через getPropertyValue(property).

<!-- значение свойства элемента -->

<button type="button" onclick="alert(getComputedStyle(this, '').fontSize)">нажать</button>

<!-- значение свойства псевдоэлемента -->

<style>
button.raz:before {
  content: "нажать";
  font-size: 120%;
}
</style>

<button type="button" class="raz" onclick="alert(getComputedStyle(this, ':before').getPropertyValue('font-size'))"></button>

Как удалить "px"


<button type="button" class="raz" onclick="alert(getComputedStyle(this, ':before').getPropertyValue('font-size').slice(0, -2))"></button>

Как скопировать (получить дубликат) стиль элемента


<button type="button" id="raz">список свойств CSS и их значения у тега</button>

<script>
var a = document.getElementById('raz'),
    aS = getComputedStyle(a, ''),
    all = '';
a.onclick = function() {
for (var i = 0; i < aS.length; i++) {
  all += aS[i] + ': ' +aS.getPropertyValue(aS[i]) + ';\n'
}
alert(all);
}
</script>

Как узнать все свойства JS, работающие с CSS свойствами


<button type="button" id="raz3">список свойств JS у атрибута style</button>
<script>
  var a = document.getElementById('raz3'),
      all = '';
  a.onclick = function() {
    for(var i in a.style) {
      all += i + ' = "' + a.style[i] + '";\n'
    }
    alert(all);
  }
</script>

Как изменить или вставить CSS через JS

Смена содержимого атрибута style


<button type="button" onclick="this.style.color='red';">нажать</button>


<button type="button" onclick="this.style.setProperty('color', 'red');">нажать</button>


<button type="button" onclick="this.style.cssText='color: red; font-weight: bold;';">нажать</button>

Изменение CSS класса или id

Изменение тега или содержимого в теге <style> или <link>

<style id="raz"></style>

<!-- добавить запись первой (.insertRule(CSS, 0)) в тег <style> или <link> (sheet) с указанным id (document.getElementById(id)) -->

<button type="button" class="raz1" onclick="document.getElementById('raz').sheet.insertRule('button.raz1 {color: red; font-weight: bold;}', 0);">добавить</button>

<!-- cssRules — массив селекторов, см. номер элемента в массиве, количество элементов в массиве -->

<button type="button" class="raz1" onclick="alert(document.getElementById('raz').sheet.cssRules.length);">число селекторов</button>


<button type="button" class="raz1" onclick="alert(document.getElementById('raz').sheet.cssRules[0].selectorText);">1-ый селектор</button>


<button type="button" class="raz1" onclick="alert(document.getElementById('raz').sheet.cssRules[0].type);">тип 1-ого селектора</button>


<button type="button" class="raz1" onclick="alert(document.getElementById('raz').sheet.cssRules[0].cssText);">1-ый селектор и его список свойств</button>


<button type="button" class="raz1" onclick="alert(document.getElementById('raz').sheet.cssRules[0].style.cssText);">список свойств 1-ого селектора</button>


<button type="button" class="raz1" onclick="alert(document.getElementById('raz').sheet.cssRules[0].style.color);">значение свойства 1-ого селектора</button>


<button type="button" class="raz1" onclick="document.getElementById('raz').sheet.cssRules[0].style.setProperty('color', 'green');">изменить свойство 1-ого селектора</button>


<button type="button" class="raz1" onclick="document.getElementById('raz').sheet.cssRules[0].style.removeProperty('color');">удалить свойство 1-ого селектора</button>


<button type="button" class="raz1" onclick="document.getElementById('raz').sheet.deleteRule(0);">удалить 1-ый селектор</button>


<button type="button" class="raz1" onclick="document.getElementById('raz').sheet.disabled = true;">отключить тег &lt;style&gt; или &lt;link&gt;</button>


<button type="button" class="raz1" onclick="document.getElementById('raz').sheet.disabled = false;">подключить тег &lt;style&gt; или &lt;link&gt;</button>


<button type="button" class="raz1" onclick="alert(document.getElementById('raz').sheet.href);">href тега &lt;link&gt;</button>


<button type="button" class="raz1" onclick="alert(document.getElementById('raz').sheet.media.mediaText);">media</button>


<button type="button" class="raz1" onclick="alert(document.getElementById('raz').sheet.ownerNode.tagName);">&lt;style&gt; или &lt;link&gt;</button>

<!-- добавить запись в первый (styleSheets[0]) в документе (document) тег <style> или <link> -->

<button type="button" class="raz2" onclick="document.styleSheets[0].insertRule('@media (min-width: 30em) {button.raz2 {color: red; font-weight: bold;}', 0);">добавить селектор</button>


<button type="button" class="raz2" onclick="alert(document.styleSheets[0].cssRules[0].cssText);">1-ый селектор и его список свойств</button>


<button type="button" class="raz2" onclick="alert(document.styleSheets[0].cssRules[0].cssRules[0].cssText);">1-ый селектор и его список свойств внутри первого правила</button>

<!-- Работа с document.getElementById(id).sheet и document.styleSheets[0] одинакова.
Для того, чтобы внести изменение в файл, его домен должен совпадать с текущей страницей -->

Как установить и подключить CSS с помощью JavaScript

Внести @import в тег <style> или <link>

document.styleSheets[0].insertRule('@import "http://сайт.ru/css.css";', 0);

Создать новый тег <style> (w3.org / IE 7-9)

Сделать новый тег <link>

var l = document.createElement('LINK');
l.rel = 'stylesheet';
l.href = 'http://сайт.ru/css.css';
l.media = 'all';
document.getElementsByTagName('head')[0].appendChild(l);

Дополняющий статью материал: