Стили CSS | JavaScript

Атрибут style
Тег <style> или <link>
Окончательное значение свойства CSS

JavaScript предоставляет доступ к
атрибуту `style`		`el.style`
тегу `<style>` или `<link>`	если можно идентифицировать тег	`el.sheet.cssRules[index]`
	поиск по NodeList тегов `<style>` или `<link>`	`document.styleSheets[index].cssRules[index]`
чтению текущего окончательного значения свойства CSS для HTML элемента		`getComputedStyle(element[, pseudoElt])`

Атрибуты, методы и свойства
`cssText`	читает и меняет правило CSS или свойства со значениями
`length`	возвращает число правил или число свойств
`insertRule(rule, index);`	добавляет новое правило CSS в CSSStyleSheet на позицию `index`
`deleteRule(index);`	удаляет правило из CSSStyleSheet, находящееся на позиции `index`
`selectorText`	возвращает селектор из CSSStyleSheet
`[index]` или `item(index)`	возвращает название свойства, находящегося на позиции `index`
`getPropertyValue(property)`	возвращает значение свойства
`setProperty(property, value)`	устанавливает, меняет значение свойства
`removeProperty(property)`	удаляет значение свойства
свойства JS, название которых совпадает с названием свойств CSS (например, `border` — `border`; искл., `float` — `cssFloat`). Если свойство CSS записано с использованием тире, то в свойстве JS символ после тире пишется слитно с большой буквы (например, `border-top-style` — `borderTopStyle`). Полный список:	возвращает, устанавливает, меняет, удаляет значение свойства

Как вставить, изменить или удалить CSS в атрибуте `style`

Стили, записанные в атрибуте style имеют приоритет над теми, что записаны в теге <style> или <link>.

<!-- только одним из способов можно проверить наличие атрибута style (все способы работы с атрибутами в JavaScript) -->

<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.hasAttribute('style'));">есть ли атрибут</button>


<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.getAttribute('style'));">что содержит</button>

<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.style.cssText);">что содержит</button>


<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.style.length);">количество свойств</button>


<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.style[0]);">1-ое свойство</button>

<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.style.item(0));">1-ое свойство</button>


<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.style.getPropertyValue('color'));">значение свойства</button>

<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.style.color);">значение свойства</button>


<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.style.getPropertyValue(this.style[0]));">значение 1-ого свойства</button>

<button type="button" style="color: red; font-weight: bold;" onclick="alert(this.style.getPropertyValue(this.style.item(0)));">значение 1-ого свойства</button>


<button type="button" onclick="this.setAttribute('style', 'color: red; font-weight: bold;');">задать</button>

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


<button type="button" onclick="this.style.setProperty('color', 'red'); this.style.setProperty('font-weight', 'bold');">задать значение свойству</button>

<button type="button" onclick="this.style.color='red'; this.style.fontWeight='bold';">задать значение свойству</button>


<button type="button" style="color: green; font-weight: bold;" onclick="this.setAttribute('style', 'color: red; font-weight: bold;');">поменять</button>

<button type="button" style="color: green; font-weight: bold;" onclick="this.style.cssText = 'color: red; font-weight: bold;';">поменять</button>


<button type="button" style="color: green; font-weight: bold;" onclick="this.style.setProperty('color', 'red');">поменять значение свойству</button>

<button type="button" style="color: green; font-weight: bold;" onclick="this.style.color = 'red';">поменять значение свойству</button>


<button type="button" style="color: green; font-weight: bold;" onclick="this.style.setProperty(this.style[0], 'red');">поменять значение 1-ого свойства</button>

<button type="button" style="color: green; font-weight: bold;" onclick="this.style.setProperty(this.style.item(0), 'red');">поменять значение 1-ого свойства</button>


<button type="button" style="color: red; font-weight: bold;" onclick="this.removeAttribute('style');">удалить</button>


<button type="button" style="color: red; font-weight: bold;" onclick="this.style.cssText = '';">очистить</button>


<button type="button" style="color: red; font-weight: bold;" onclick="this.style.removeProperty('color');">убрать свойство</button>

<button type="button" style="color: red; font-weight: bold;" onclick="this.style.color = '';">убрать свойство</button>


<button type="button" style="color: red; font-weight: bold;" onclick="this.style.removeProperty(this.style[0]);">убрать 1-ое свойство</button>

<button type="button" style="color: red; font-weight: bold;" onclick="this.style.removeProperty(this.style.item(0));">убрать 1-ое свойство</button>

Как добавить, поменять или убрать CSS в теге `<style>` или `<link>`

Нельзя в атрибуте style установить стиль для псевдоэлементов (:before, :after и др.) [варианты решения] и пседвоклассов (:hover, :nth-child() и др.). Но возможно

изменение класса или id тега,
изменение содержимого тегов <style> или <link>.

<style id="raz1">
button.dva {
  color: red;
}
@media (min-width: 30em) {
  button.dva {
    font-weight: bold;
  }
}
button.tri {
  font-weight: bold;
}
</style>


<button type="button" class="dva" onclick="document.getElementById('raz1').sheet.disabled = true;">отключить</button>


<button type="button" class="dva" onclick="document.getElementById('raz1').sheet.disabled = false;">подключить</button>


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


<button type="button" class="dva" onclick="alert(document.getElementById('raz1').sheet.href);">атрибут href</button>

<!-- другие методы для работы с media на сайте arininav.ru -->

<button type="button" class="dva" onclick="alert(document.getElementById('raz1').sheet.media.mediaText);">атрибут media</button>

<!-- el.sheet или document.styleSheets[0] не меняют HTML-содержимое тега, они меняют содержимое интерфейса CSSStyleSheet -->

<button type="button" class="dva" onclick="alert(document.getElementById('raz1').innerHTML);">что содержит тег &lt;style&gt;</button>


<button type="button" class="dva" onclick="var r = document.getElementById('raz1').sheet.cssRules, a = ''; for (var i = 0; i &lt; r.length; i++) {a += r[i].cssText + '\n\n'} alert(a)">CSSStyleSheet</button>


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


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

<!-- с вложенными правилами работа та же -->

<button type="button" class="dva" onclick="alert(document.getElementById('raz1').sheet.cssRules[1].cssText);">2-е правило</button>


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


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


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


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


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


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


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

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


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


<button type="button" class="chetyre" onclick="document.getElementById('raz1').sheet.insertRule('button.chetyre {color: red; font-weight: bold;}', 3);">добавить правило на 4-ю позицию</button>


<button type="button" class="tri" onclick="document.getElementById('raz1').sheet.cssRules[2].style.setProperty('color', 'green');">задать значение свойству в 3-м правиле</button>

<button type="button" class="tri" onclick="document.getElementById('raz1').sheet.cssRules[2].style.color = 'green';">задать значение свойству в 3-м правиле</button>


<button type="button" class="tri" onclick="document.getElementById('raz1').sheet.cssRules[2].style.cssText = 'font-weight: bold; color: red;';">поменять набор свойств или их значения в 3-ем правиле</button>


<button type="button" class="tri" onclick="document.getElementById('raz1').sheet.cssRules[2].style.setProperty('font-weight', 'normal');">поменять значение свойству в 3-ем правиле</button>

<button type="button" class="tri" onclick="document.getElementById('raz1').sheet.cssRules[2].style.fontWeight = 'normal';">поменять значение свойству в 3-ем правиле</button>


<button type="button" class="tri" onclick="var s = document.getElementById('raz1').sheet.cssRules[2].style; s.setProperty(s[0], 'normal');">поменять значение 1-ого свойства в 3-ем правиле</button>


<button type="button" class="chetyre" onclick="document.getElementById('raz1').sheet.deleteRule(3);">удалить 4-ое правило</button>


<button type="button" class="tri" onclick="document.getElementById('raz1').sheet.cssRules[2].style.cssText = '';">убрать из 3-его правила свойства, оставив только селектор</button>


<button type="button" class="chetyre" onclick="document.getElementById('raz1').sheet.cssRules[3].style.removeProperty('color');">убрать свойство у селекторов из 4-ого правила</button>

<button type="button" class="chetyre" onclick="document.getElementById('raz1').sheet.cssRules[3].style.color = '';">убрать свойство у селекторов из 4-ого правила</button>


<button type="button" class="chetyre" onclick="var s = document.getElementById('raz1').sheet.cssRules[3].style; s.removeProperty(s[0]);">убрать 1-ое свойство у селекторов из 4-ого правила</button>

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


<button type="button" onclick="dva()">полный CSSStyleSheet</button>

<script>
function dva() {
  var s = document.styleSheets, a = '';
  for (var i = 0; i < s.length; i++) {
    a += '<li>&lt;' + s[i].ownerNode.tagName + '&gt; URL:' + s[i].href + '<ol>';
    var r = s[i].cssRules;
    for (var j = 0; j < r.length; j++) {
      a += '<li>' + r[j].cssText;
    }
    a += '</ol>'
  }
  var w = window.open('', '', 'scrollbars=1'); // создать и открыть новое окно
  w.document.write('<!DOCTYPE html>\n<ol>'+a+'</ol>');
}
</script>

Как создать, установить и подключить 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);

Как получить стиль элемента: `getComputedStyle(element[, pseudoElt])`

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

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

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

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

<button type="button" class="raz" onclick="alert(getComputedStyle(this, '').fontSize);"></button>

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

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

<button type="button" class="raz" onclick="alert(getComputedStyle(this, ':before').fontSize);"></button>

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


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


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

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

наверх ↑

6 комментариев:

Анонимный: .
NMitra: Используйте, пожалуйста, для кода форму http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html
Анонимный: Полезная статья: всё написано доступным языком. Спасибо!
NMitra: Благодарю за комментарий!
Анонимный: Спасибо, все по сути и ничего лишнего. В наше время это редкость
NMitra: А я сомневалась в структуре статьи: казалось, что примеров многовато... Спасибо, что развенчали сомнения!