吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【JS入門】CSSを制御する Vol.1(インラインスタイルの制御)

2018年2月20日 / category : javascript

スタイルシート(CSS)の制御について解説していきます。CSSを制御する方法はいくつかありますが、今回はHTMLのstyle属性(インラインスタイル)を制御する方法を解説します。インラインスタイルを制御するには、次の4つの方法が考えられます。

1. プロパティstyleを使用する
2. メソッドgetPropertyValue/setProperty/removePropertyを使用する
3. プロパティcssTextを使用する
4. メソッドgetAttribute/setAttribute/removeAttributeを使用する

まずはDOMオブジェクトのプロパティstyleを使用して制御する方法を解説します。まずは、次のコードを見てみます。

プロパティstyleを使用したCSSの制御

プロパティstyleによるCSSの参照

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p id="txt">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
console.log( txt.style ); // CSSStyleDeclaration {...}

p要素(DOMオブジェクト)のプロパティstyleをコンソールで見てみると、CSSStyleDeclarationインターフェースを継承したオブジェクトを参照していることがわかります。CSSStyleDeclarationインターフェースをもう少し詳しくみてみます。

sample.js
console.log( CSSStyleDeclaration.__proto__ ); // ƒ () { [native code] }
console.log( CSSStyleDeclaration.__proto__ === Function.prototype ); // true

CSSStyleDeclarationインターフェースはFunctionのプロトタイプを継承したインターフェースです。
それでは先ほどのp要素のプロパティstyleに話を戻し、コンソールに表示されたオブジェクトを展開してみます。

コンソール画面

CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", ...}
	alignContent: ""
	alignItems: ""
	...(省略)
	fontSize: ""
	...(省略)
	zoom: ""

プロパティstyleが参照しているオブジェクトを展開するとCSSのプロパティ名と同様もしくは類似しているプロパティ名が定義されています。p要素にはCSSが設定されていないため、いずれのプロパティにも値が入っていません。続いて、次のコードを見てみます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
	#txt{
		color: #f00;
	}
</style>
</head>
<body>
<p id="txt">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
console.log( txt.style );
console.log( txt.style.color ); //

HTMLのstyle要素でp要素に対しフォントカラーを赤色に設定しています。
ただ、プロパティstyleでプロパティcolorを参照したところ、値は空になっています。なぜでしょうか。
プロパティstyleのコンソールを展開してみます。

コンソール画面

CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", ...}
	...(省略)
	color: ""
	...(省略)

やはり空です。プロパティstyleはあくまでインラインスタイル(style属性)で設定されたCSSのみを参照します。
そのため、HTMLのstyle要素で設定したCSSのプロパティに関しては、参照することができません。

続いて、プロパティstyleを使用してCSSのプロパティに値を設定してみます。

プロパティstyleによるCSSの設定

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p id="txt">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
txt.style.fontSize = '24px';
console.log( txt.style.fontSize ); // 24px

上のコードで、ブラウザ上の「お腹減った。」の文字列が24pxになったことが確認できました。プロパティfontSizeが、CSSのプロパティfont-sizeだということになります。
CSSのプロパティ名に「-」が含まれている「margin-top」「padding-left」「font-weight」などは、CSSStyleDeclarationインターフェースでは「marginTop」「paddingLeft」「fontWeight」と「-」を取りハイフン直後の文字列を大文字にしたものがプロパティ名となります。
また、代入する値は必ず単位を含めた文字列の値が必要です。

続いて、CSSの設定では、プロパティmarginなど省略形で指定できるプロパティがあります。これをプロパティstyleで設定する場合は、次のような設定になります。

sample.js
let txt = document.getElementById('txt');
txt.style.margin = 10+'px '+20+'px '+30+'px '+40+'px';

個別に設定する場合は、次のようになります。

sample.js
let txt = document.getElementById('txt');
txt.style.marginTop = 10+'px';
txt.style.marginRight = 20+'px';
txt.style.marginBottom = 30+'px';
txt.style.marginLeft = 40+'px';

続いて、プロパティstyleを使用して一度に複数のプロパティを設定してみます。

プロパティstyleによるCSSの複数設定

sample.js
let txt = document.getElementById('txt');
let css = {
	color: '#f00',
	fontSize: '36px',
	fontWeight: 'bold',
	lineHeight: 1.5,
	letterSpacing: '4px'
};
for( let i in css ){
	txt.style[i] = css[i];
};

プロパティstyleは基本的に個別にプロパティを設定するプロパティですので、プロパティを一度に複数設定する場合は、CSSのプロパティをオブジェクトにまとめ、for文でループ処理し、設定する方法が考えられそうです。

プロパティstyleによるCSSの削除

プロパティstyleで設定したCSSのプロパティに空の値を代入することで削除することができます。厳密には、削除ではなく値を空にすることで無効にします。

sample.js
let txt = document.getElementById('txt');
txt.style.color = '#f00';
txt.style.color = '';

上のコードでは、一度フォントカラーに赤色を設定していますが、すぐに空の値を代入しています。ブラウザで確認すると、デフォルトのフォントカラーになっていることが確認できます。続いて、次のコードを確認します。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
	#txt{
		color: #f00;
	}
</style>
</head>
<body>
<p id="txt">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
txt.style.color = '';

CSSのフォントカラー(プロパティcolor)の値を空にしましたが、ブラウザを確認するとフォントカラーが赤色のままです。
これは先ほども解説した通り、プロパティstyleが参照できるのはインラインスタイルだけですので、HTMLのstyle要素で設定したCSSは制御できません。

プロパティstyleによるimportant設定

CSSの設定でimportantを設定する場合があります。これをプロパティstyleで指定してみます。

sample.js
let txt = document.getElementById('txt');
txt.style.color = '#f00 !important';

ブラウザを確認してもテキストが黒色のままです。プロパティstyleでは、importantの設定ができません。

メソッドgetPropertyValue/setProperty/removePropertyを使用したCSSの制御

CSSStyleDeclarationインターフェースで定義されているメソッドgetPropertyValueでstyle属性で設定されているCSSのプロパティの値を参照することができます。

メソッドgetPropertyValueによるCSSの参照

style.getPropertyValue(name):style属性で設定されているCSSのプロパティの値を参照する。
引数 name(string) : CSSのプロパティ名
戻り値(return): CSSのプロパティに設定されている値(string)
構文

let value = style.getPropertyValue('color');

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p id="txt" style="color: #f00; font-size: 36px;">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
console.log( txt.style.getPropertyValue('color') ); // rgb(255, 0, 0)
console.log( txt.style.getPropertyValue('font-size') ); // 36px

メソッドsetPropertyによるCSSの設定

style.setProperty(name, value, priority):style属性のCSSを設定する
引数 name(string) : CSSのプロパティ名
引数 value(string) : CSSのプロいパティに対する値
引数 priority(string) : importantの設定(任意)
構文

style.setProperty('color', '#f00', 'important');

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p id="txt">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
txt.style.setProperty('color', '#f00');

ブラウザで確認すると、テキストのフォントカラーが赤色になっていることが確認できます。

メソッドsetPropertyによるCSSの複数設定

sample.js
let txt = document.getElementById('txt');
let css = {
	'color': '#f00',
	'font-size': '36px',
	'font-weight': 'bold',
	'line-height': 1.5,
	'letter-spacing': '4px'
};
for( let i in css ){
	txt.style.setProperty(i, css[i]);
};

メソッドsetPropertyもプロパティstyleと同様、個別のプロパティを設定しますので、プロパティを一度に複数設定する場合は、CSSのプロパティをオブジェクトにまとめ、for文でループ処理し、設定する方法が考えられそうです。

メソッドremovePropertyによるCSSの削除

style.removeProperty(name):style属性のCSSのプロパティを削除する。
引数 name(string) : CSSのプロパティ名
構文

style.removeProperty('color');

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p id="txt" style="color:#f00;">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
txt.style.removeProperty('color');

HTMLでstyle属性を設定し、フォントカラー(color)を指定していますが、メソッドremovePropertyでCSSのプロパティcolorを削除しています。ブラウザで見ると、テキストがデフォルトのカラーになっていることが確認できます。

メソッドsetPropertyによるimportant設定

先ほど解説したメソッドsetPropertyの第3引数を指定することでimportant設定が可能です。

sample.js
let txt = document.getElementById('txt');
txt.style.setProperty('color', '#0f0', 'important');

プロパティcssTextを使用したCSSの制御

CSSStyleDeclarationインターフェースで定義されているプロパティcssTextを使用することで、style属性のCSSを制御することができます。次のコードを見てみます。

プロパティcssTextによるCSSの参照

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p id="txt" style="color:#f00;">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
console.log( txt.style.cssText ); // color: rgb(255, 0, 0);

プロパティcssTextは、style属性で設定している値を参照します。

プロパティcssTextによるCSSの設定

sample.js
let txt = document.getElementById('txt');
txt.style.cssText = 'color:#00f';
console.log( txt.style.cssText ); // color: rgb(0, 0, 255);

上のコードをブラウザで確認すると、テキストのフォントカラーが青色になっていることが確認できます。

プロパティcssTextによるCSSの複数設定

sample.js
let txt = document.getElementById('txt');
let css = 'color: #f00; font-size: 36px; font-weight: bold; line-height: 1.5; letter-spacing: 4px;';
txt.style.cssText = css;

プロパティcssTextによるCSSの削除

sample.js
let txt = document.getElementById('txt');
txt.style.cssText = '';

プロパティcssTextによるimportant設定

sample.js
let txt = document.getElementById('txt');
txt.style.cssText = 'color: #0f0 !important;';

メソッドgetAttribute/setAttribute/removeAttributeを使用したCSSの制御

過去の記事「DOMについて Vol.4(ノードの属性の取得・設定・削除)」で解説したElementインターフェースで定義されているメソッドgetAttribute/setAttributeを使用してCSSを制御することができます。

メソッドgetAttributeによるCSSの参照

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p id="txt" style="color:#f00;">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
console.log( txt.getAttribute('style') ); // color:#f00;

メソッドgetAttributeで、style属性を指定することでインラインスタイルの値を参照することができます。

メソッドsetAttributeによるCSSの設定

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p id="txt">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
txt.setAttribute('style', 'font-size:36px');

ブラウザを確認するとテキストのサイズが36pxになっていることが確認できます。この方法では、メソッドsetAttributeを使用してp要素のstyle属性の値(文字列)を設定しているため、CSSのプロパティ名(ハイフン付きの名前)になります。

メソッドsetAttributeによるCSSの複数設定

メソッドsetAttributeは、HTML要素のある特定の属性に対し値を代入するメソッドですので、インラインスタイルに複数のプロパティを指定する場合は、次のような書き方で可能となります。

sample.js
let txt = document.getElementById('txt');
let css = 'color: #f00; font-size: 36px; font-weight: bold; line-height: 1.5; letter-spacing: 4px;';
txt.setAttribute('style', css);

メソッドsetAttributeによるCSSの削除

プロパティstyleと考え方は同じです。CSSのある特定のプロパティのみを無効にしたい場合は、そのプロパティを除いた文字列を上書きします。次のコードを見てみます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<p id="txt" style="color: #f00; font-size: 36px; font-weight: bold; line-height: 1.5; letter-spacing: 4px;">お腹減った。</p>
<script src="./js/sample.js"></script>
</body>
</html>
sample.js
let txt = document.getElementById('txt');
let css = 'font-size: 36px; font-weight: bold; line-height: 1.5; letter-spacing: 4px;'
txt.setAttribute('style', css);

HTMLでp要素のstyle属性を設定しています。この属性の値からフォントカラー(color)を除いた値をメソッドsetAttributeで設定しています。ブラウザを確認すると、フォントカラーがデフォルトのカラーになっています。その他のプロパティは効いたままです。
もしstyle属性自体を削除したい場合は、メソッドremoveAttributeを使用してください。

sample.js
let txt = document.getElementById('txt');
txt.removeAttribute('style');

メソッドsetAttributeによるimportant設定

メソッドsetAttributeでの設定であれば、importantの設定が可能です。

sample.js
let txt = document.getElementById('txt');
txt.setAttribute('style', 'color:#f00 !important');

メソッドsetAttributeでプロパティの値をimportant付きの値で代入しています。ブラウザで設定されいているCSSを確認するとimportantが付与されていることが確認できます。
以上が、インラインスタイルの制御ができる4つの方法です。まとめとして、プロパティstyleとメソッドgetPropertyValue/setProperty/removePropertyは、インラインスタイルのプロパティを個別に操作することができるメリットがあります。
プロパティcssTextとメソッドgetAttribute/setAttribute/removeAttributeは、style属性の値を文字列として扱うため複数のプロパティを一括で操作する際にメリットがあるかもしれません。