「脱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.cssTextstyle属性 値を文字列形式で取得・設定できるプロパティです。単純に代入してしまうと、 全ての値を書き換えてしまう ので += にしています。

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! は必要ないので注意してください。