JavaScriptでclass属性とstyle属性を操作する方法まとめ
JavaScriptでDOM APIを通してclass属性とstyle属性を操作する方法をまとめました。
style属性を操作する
styleプロパティ
const message = document.createElement('div');
message.style.backgroundColor = '#37383d';
message.style.width = '120%';
// console.log(message.style.backgroundColor);//rgb(55, 56, 61)
上のようにstyleプロパティを使うと、インラインスタイルで適用されます。
console.log(message.style.height);//こうやってもなにもでてきません。なぜならインラインスタイルに適用されているからです。
console.log(message.style.width);//120% と設定したものなら返ってきます。
styleプロパティを使うと、インラインスタイルで適用されるため、styleシートなどで宣言されているスタイルもインラインスタイルではないので取得できません。
インラインで設定したものであれば返ってきます。
getComputedStyle()
console.log(getComputedStyle(message));
//CSSStyleDeclaration {0: "align-content", 1: "align-items", 2: "align-self", 3: "alignment-baseline", …}
console.log(getComputedStyle(message).color);//rgb(187, 187, 187)
console.log(getComputedStyle(message).height);//50px
message.style.height = Number.parseFloat(getComputedStyle(message).height,10) + 40 + 'px';//文字列型なので数値へ変換する必要があります。
console.log(getComputedStyle(message).height);//90px
getComputedStyle()を使用すると、適用されているすべてのスタイルを参照することができます。
上の例のようにすると、先程取得できなかったインラインスタイル以外もすべて取得できます。
heightはstyleシートでも宣言していないものですが、ブラウザは表示するために計算しないといけません。Computedとあるようにブラウザが計算した値でも取得することができます。
上の例のようにgetComputedStyle()は文字列で返すため、数値へ変換できるNumber.parseFloat()かNumber.parseInt()を使うことで調整することが可能です。
style.setProperty():CSSの設定を変更する
style.setProperty()でCSSの設定を変更することができます。
たとえば、次のようにCSS変数を設定しているケースをみてみましょう。
//CSS変数
：root {
--color-primary: green;
--color-secondary: blue;
}
rootなのでdocumentを取得します。
document.documentElement.style.setProperty('--color-secondary', 'red');//赤色に変わる
このようにstyle.setProperty()を使って、CSS変数を変更することができます。
class属性を操作する
ClassName
classという単語はJavaScriptの別の予約語になっているので、CSSのクラスを選択したい場合は、
classNameを使います。
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const eventNode = document.getElementById('event');
eventNode.className = ‘btn-blue’;
});
}
classNameでクラスを足してはいけない
注意点としては、classNameをつけるとclass属性がごっそり入れ替わる点です。
もともとついていた他のクラス属性もなくなるので、注意しましょう。
次のように、もともとbtn btn-redというクラス属性がついていたのであれば、下のように並列して書きます。
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const eventNode = document.getElementById('event');
eventNode.className = ‘btn btn-blue’;
});
}ただしこの操作するところで消えてほしくない属性も合わせてclassNameで書く方法はメリットがないためおすすめできません。
classListを使いましょう。
classList
classList.add()
classList.add()を使うことで、もともとあるクラスを消すことなく、クラス属性を追加できます。
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const eventNode = document.getElementById('event');
eventNode.classList.add(‘btn-blue’);
});
}classList.remove()
classList.remove()を使うことで、指定のクラス属性を削除できます。
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const eventNode = document.getElementById('event');
eventNode.classList.remove(‘btn-blue’);
});
}classList.contains()
classList()は要素がある特定のクラス属性をつけているかを調べることもできます。
下の例では、btn-blueがついている場合はtrue、ついていなければfalseで返ってきます。
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const eventNode = document.getElementById('event');
eventNode.classList.contains(‘btn-blue’) === true);
});
}classList.toggle()
つけたり外したりするのことはよくあるため、もっと短く書けるclassList.toggle()もあります。
'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const eventNode = document.getElementById('event');
eventNode.classList.toggle(‘btn-blue’);
});
}