jQueryでCSSのプロパティを複数指定する

jQueryでCSSのプロパティを複数指定したい場合の方法です。

普段やっている方法

CSSを複数指定したい場合、{property: value[, property: value …]}のように区切って指定します。
プロパティ名に-が含まれる場合はキャメルケース(-を削除して次を大文字)にするか、‘か"で括る必要があります。

JavaScript

$(function() {
	var text1 = $('.text1');
	var text2 = $('.text2');

	text1.css({
		color: '#ff0000',
		fontSize: '20px',
		fontWeight: 'bold',
		letterSpacing: '1em'
	});
	text2.css({
		color: '#ff0000',
		fontSize: '20px',
		fontWeight: 'bold',
		letterSpacing: '1em'
	});
});

通常の指定方法のデモページ
　

指定するプロパティが多い場合、改行を無くして1行にもできます。

JavaScript

$(function() {
	var text1 = $('.text1');
	var text2 = $('.text2');

	text1.css({color: '#ff0000', fontSize: '20px', fontWeight: 'bold', letterSpacing: '1em'});
	text2.css({color: '#ff0000', fontSize: '20px', fontWeight: 'bold', letterSpacing: '1em'});
});

通常の指定方法のデモページ2
　

変数に入れる方法

今回は同じCSSのプロパティ群を複数の要素に指定したかったので、変数に入れる方法を試してみました。

JavaScript

$(function() {
	var text1 = $('.text1');
	var text2 = $('.text2');

	var fontStyle = {
		color: '#ff0000',
		fontSize: '20px',
		fontWeight: 'bold',
		letterSpacing: '1em'
	}

	text1.css(fontStyle);
	text2.css(fontStyle);
});

変数に入れる方法のデモページ
　

【参考サイト】

• jQueryでCSSの値を複数設定するときの記述 – Qiita