атрибуту 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);"><style> или <link></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);">что содержит тег <style></button> <button type="button" class="dva" onclick="var r = document.getElementById('raz1').sheet.cssRules, a = ''; for (var i = 0; i < 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><' + s[i].ownerNode.tagName + '> 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 комментариев: