JSでインラインスタイルを複数設定する方法

2021-04-03

概要

JavaScriptでスタイルを付与したいとき、一つなら簡単ですが複数ならどうしようか考えたことがありませんか?

複数設定する際の方法をご紹介します。

Object.assign

JSには、Object.assign()メソッドがあります。
列挙可能なプロパティの値を、1つ以上のコピー元からコピー先オブジェクトにコピーするために使用されます。

なので、以下のようにすれば複数のスタイルを元のstyleプロパティにマージできます。

const target = document.querySelector('...')
const css = {
  color: 'red',
  fontWeight: 'bold',
  textAlign: 'center'
}
Object.assign(target.style, css)

これは一つの手段なので、HTMLElementには一つのクラスを当てることがスマートかなと感じます。

結論

こんな方法があるんだなぁと感じました。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店