｢脱jQuery｣ 生JSで.css()のようにCSSの取得と!importantも含めた設定をする
生JSでCSSの値を取得したり設定する方法は色々あるので紹介します。また、 !important を設定する方法も併せて紹介します。
jQuery
// 取得
var value = $('.selector').css('font-size');
// 設定
$('.selector').css('font-size', '20px');
jQueryだと css() で取得と設定をすることができます。
生JSでCSSの取得
element.style.*
var value = document.querySelector('.selector').style.fontSize;
var value = document.querySelector('.selector').style['font-size'];
style属性 で指定されたCSSを element.style.プロパティ名 または element.style[プロパティ名] で取得することができます。
getComputedStyle()
var value = getComputedStyle(document.querySelector('.selector')).fontSize;
var value = getComputedStyle(document.querySelector('.selector'))['font-size'];
getComputedStyle() では すべての CSSを取得することができます。
var value = getComputedStyle(document.querySelector('.selector'), '::before').fontSize;
var value = getComputedStyle(document.querySelector('.selector'), '::before')['font-size'];
また、 getComputedStyle() の第2引数に ::before や ::after などの擬似要素を指定することで、擬似要素のCSSを取得することもできます。
生JSでCSS設定
element.style.*
document.querySelector('.selector').style.fontSize = '32px';
document.querySelector('.selector').style['font-size'] = '32px';
style属性 に設定することができます。
element.style.cssText
document.querySelector('.selector').style.cssText += 'font-size: 32px';
element.style.cssText は style属性 値を文字列形式で取得・設定できるプロパティです。単純に代入してしまうと、 全ての値を書き換えてしまう ので += にしています。
element.setAttribute()
var node = document.querySelector('.box');
var css = node.getAttribute('style');
node.setAttribute('style', css + 'font-size: 32px;');
少し使いづらいですが、 setAttribute() で書き換えることもできます。
element.style.setProperty()
document.querySelector('.selector').style.setProperty('font-size', '32px');
プロパティと値を 引数 で設定できるので分かりやすいですね。
style要素
document.head.insertAdjacentHTML('beforeend', '<style>.selector { font-size: 32px; }</style>');
style 要素を head の末尾に追加します。
CSSStyleSheet.insertRule()
var style = document.styleSheets.length ? document.styleSheets[0] : document.head.appendChild(document.createElement('style')).sheet;
style.insertRule('.selector { font-size: 32px; }', style.cssRules.length);
すでにCSSファイルがあればその末尾に追加し、無ければ style 要素を生成しそこに追加しています。
!importantを設定
jQuery
var temp = $('.selector').attr('style');
$('.selector').css({
'cssText': temp + 'font-size: 32px !important;'
});
jQueryならこのようにすれば !important を指定できます。
生JS
// element.style.cssText
document.querySelector('.selector').style.cssText += 'font-size: 32px !important';
// element.setAttribute()
var node = document.querySelector('.box');
var css = node.getAttribute('style');
node.setAttribute('style', css + 'font-size: 32px !important;');
// element.style.setProperty()
document.querySelector('.selector').style.setProperty('font-size', '32px', 'important');
// style要素
document.head.insertAdjacentHTML('beforeend', '<style>.selector { font-size: 32px !important; }</style>');
// CSSStyleSheet.insertRule()
var style = document.styleSheets.length ? document.styleSheets[0] : document.head.appendChild(document.createElement('style')).sheet;
style.insertRule('.selector { font-size: 32px !important; }', style.cssRules.length);
element.style.* 以外ならどの方法でも !important を設定できます。また、 element.style.setProperty() で設定する際は !important の ! は必要ないので注意してください。
CSS本執筆しました！！！
CSS本出します！1/29発売予定
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs