Posted at

オブジェクトに指定した複数のスタイルを一括で要素に適用する

More than 1 year has passed since last update.

jQueryのcssメソッドのように一括スタイル適用する方法を模索したところ、以下の方法に落ち着きました。

以下のsetStyles1は各スタイルプロパティを個別に修正。

そのため、既存のDOM上で設定されたstyle属性を破壊することがなく、指定されたもののみ上書きされます。

setStyles2はDOM上のstyle属性を上書きするため、HTML上でインラインに指定された内容やJSで指定したスタイルは破棄されます。

jQueryのcssメソッドは指定したもののみ上書きするため、近い挙動をするのはsetStyles1になります。

// スタイルの定義

let myStyles = {
"backgroundColor": "orange",
"text-align": "left",
"border": "8px solid black"
};

// 適用

// myStyles で指定したスタイルのみ上書き
setStyles1(document.body, styles);
// 指定済みのスタイルを破棄して設定
setStyles2(document.body, styles);

// styleを一つずつ設定
function setStyles1 (elem, styles) {
Object.keys(styles).forEach((key) => {
// プロパティ名をハイフン区切りからcamelCaseに変換
let styleName = key.replace(/\-[a-zA-Z]/g, function(str) {
return str.replace("-", "").toUpperCase();
});
// 要素にスタイル適用
elem.style[styleName] = styles[key];
})
}

// styles属性に生成した文字列を流し込む
function setStyles2 (elem, styles) {
let styleStr = "";
Object.keys(styles).forEach((key) => {
// プロパティ名をキャメルケースからハイフン区切りに変換
styleStr += key.replace(/([A-Z])/g, "-$1").toLowerCase() + ":" + styles[key] + ";";
});
// 要素にスタイル適用
elem.setAttribute("style", styleStr);
}