JavaScriptで複数styleを一括で指定するには？

Question

JavaScriptでstyleを一括で指定する方法はありますでしょうか？
hoge.style…に続いているCSSを何かに纏めるか、一度に指定したいです。

    <h1 id="title">あいうえお</h1>

    <script>
        let hoge = document.getElementById("title");

        hoge.style.fontSize = "50px";
        hoge.style.color = "red";
        hoge.style.textAlign = "center";
    </script>

Jqueryの場合だと以下の様にできると思うのですが、JavaScriptでも同じ様な感じの定義方法はありますでしょうか？

$("h1").css({
    font-size:"50px",
    color:"red",
    text-align:"center"
});

Comments

[think49]

質問を [編集] して、コードをコードブロックで括ってください。
https://docs.github.com/ja/github/writing-on-github/creating-and-highlighting-code-blocks

Answer 1

Object.assign(document.getElementById("title").style,{
fontSize:"50px",
color:"red",
textAlign:"center",
});

スタイルを一つずつ書き換えるならクラスをつくってcssで指定するほうがよいでしょう

Comments

[hjds]

勉強になりました

[yukina00235]

有難うございます。
classを作るというのが難しいのですが、コードを確認しながら試してみます。

Answer 2

こんにちは。

こういうことでしょうか？

hoge.style.cssText= "font-size: 50px; color: red; text-align: center;"

Comments

[hjds]

初めて知りました
これはスマートですね

[Lhankor_Mhy]

うーん、どうでしょうか。
既存のものを上書きしてしまうので、活用できる範囲は狭いと思います。

[yukina00235]

有難うございます。
とても簡単そうな書き方ですね、参考にさせて頂きます！

Answer 3

element.style

element.style を書き換える方法は他の回答を参照頂くとして、element.style の書き換えは下記観点がからお勧めできません。

• 今後、変更を加える場合にJavaScriptコードを書き換えなければならない(スタイル制御がCSSではない)
• 詳細度の制御が困難(!important で上書きする以外に手段がない)
• セマンティクス的にNG

セレクタ

基本的には、「idセレクタ」「classセレクタ」「属性セレクタ」等のセレクタを予め定義しておき、JavaScript側でセレクタの適用条件を満たすようにコードを書くのが正攻法だと思います。

• Selectors Level 4 （日本語訳）
• Element.classList - Web API | MDN

<style>
  .hoge {
    font-size: 50px;
    color: red;
    text-align: center;
  }
</style>
<h1 id="title1">あいうえお</h1>
<h1 id="title2">かきくけこ</h1>
<h1 id="title3">さしすせそ</h1>

<script>
  for (let h1 of document.getElementsByTagName('h1')) {
    h1.classList.add('hoge');
  }
</script>

CSSStyleSheet#insertRule

セレクタを含めたスタイル宣言をJavaScriptコード側で実装することは可能ですが、そうすると先のデメリットが復活する為、特別な事情があるのでもない限り、お勧めしません。

• CSSStyleSheet.insertRule() - Web API | MDN

<style></style>
<h1 id="title1">あいうえお</h1>
<h1 id="title2">かきくけこ</h1>
<h1 id="title3">さしすせそ</h1>

<script>
  const styleSheets = document.styleSheets;
  
  styleSheets[styleSheets.length - 1].insertRule(`.hoge {
    font-size: 50px;
    color: red;
    text-align: center;
  }`);

  for (let h1 of document.getElementsByTagName('h1')) {
    h1.classList.add('hoge');
  }
</script>

Re: yukina00235 さん

Comments

[Lhankor_Mhy]

>think49さん

横からすみません。

「セマンティクス的にNG」というのは、どういう理由によるものかわかりませんでした。
style属性によって意味論に影響を与える事例を想定できなかったので、もしよろしければ教えていただきたく存じます。

[think49]

@Lhankor_Mhy さん
「スタイル情報の変化」は「論理的な意味の変化」を表すと考えています。
今回の場合でいえば、例えば、「重要情報」「機密情報」など、他の見出しと区別(意味が異なる)が必要であるが故に動的にデザインを変更している状況が考えられます。
デザインを変更する「目的」が「意味」を表していることが多いと思います。

[Lhankor_Mhy]

ありがとうございます。

その場合、クラス指定による「スタイル情報の変化」についても意味論に影響を与えることになるかと思いますが、そちらが「セマンティクス的にNG」とならないのは、属性によって意味を付与するのはよいという考えによるものですか？
「属性の変化による意味論的変化を伴わないスタイル情報の変化は、望ましくない」ということでしょうか？

つまり、「スタイル情報を変化させる意図として意味論的変化の伝達があるはずだが、スタイルのみを付与することによって、意図した意味論的変化を伝えることに失敗している」というようなご意見ですか？

重ねての質問、失礼いたしますが、よろしければお教えください。

[think49]

ご認識の通りです。
「id属性値」「class属性値」「data-* 属性値」は「論理的な意味をこめた名前」を命名する事が出来ますが、style属性値/element.styleでは「意味」が読み取れません。
これがHTML仕様で定義済みの属性名なら、HTML仕様の範疇で属性名/属性値を変化させるだけで「意味」が付与されますが、「独自性の高い意味」の場合は「任意の名前」が必要になると考えています。

※本回答では質問文に倣って、メタ構文変数を使用していますが、本来は意味のあるclass名を命名する必要があります。
https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E6%A7%8B%E6%96%87%E5%A4%89%E6%95%B0

[Lhankor_Mhy]

なるほど、よくわかりました。
逆に言えば、同時にWAI-ARIA属性などを付与するのであれば、style属性を直接操作してもセマンティクスの問題は発生しないということですね（そんなことをする人はいないでしょうけれど）。

大変勉強になりました、ありがとうございます。
横からの質問、大変失礼いたしました。

[think49]

> 逆に言えば、同時にWAI-ARIA属性などを付与するのであれば、style属性を直接操作してもセマンティクスの問題は発生しないということですね

WAI-ARIA属性を使用する場合、「属性セレクタ」で各種 role/state を参照可能な為、style属性を必要とする場面はないと思います。

https://momdo.github.io/wai-aria-1.2/#introstates
> ほとんどのモダンなユーザーエージェントは、CSS属性セレクター（[CSS3-SELECTORS]）をサポートし、同等の機能を実現するのに必要なスクリプトの量を減らす、WAI-ARIA属性情報に基づくUIの変更を著者に作成できるようにする。

Answer 4

<div class="target">test</div>

こういうのがあるとして、

一括でバンと

既に同じロジックを回答されている方もいますが、1行というかまとめて書くと管理がアレならこれで良いかと。
このように書くと、仕組みが分離されている→おや？関数にできそうな気がする→スタイルの変数をいくつか用意して…といろいろ応用まで考えられるのではないでしょうか？

const element = document.querySelector('.target');
const styles = {
  color: 'red',
  fontSize: '20px',
  backgroundColor: '#f0f0f0',
  padding: '10px'
};

// ループなしで一括適用
Object.assign(element.style, styles);

メリットは1回で全部設定できる所でしょうか。-webkit-などのベンダープレフィックスが入るものには使用できません。

ループは入るが簡潔にまたちょっと使い勝手良く

Object.entries(styles).forEach(([prop, value]) => {
  element.style.setProperty(prop, value);
});

前述のObject.assign部分を上記のように変更するとループが入ることになりますが、これであれば次のようなスタイルも読めます。

const styles = {
  '--custom-property': 'value', // CSS変数も可能
  'color': 'blue',
  'font-size': '16px'
};

つまり、ベンダープレフィックスも使用できます。

オーソドックスな方法 cssの設計を上手に

また、次のようにターゲットに当たる識別用のクラスと、そのスタイル(色やサイズ、諸々)が記述してあるクラスがあった場合、styleをダイレクトに変更するのではなく、クラスを付け替えるだけで対応できます。

<div class="target red">test</div>

cssでいくつかスタイル用のクラスを作っておいてそのクラスを、元々あったクラスと交換するのが一番良いかと思います。ただcssの設定で変更したい部分と骨組みを別にする必要があります。サイズやマージン、パディングはそのままで文字色を変えるとか、背景を変えるとか何を変えるかを想定してスタイルするのが良いかと。
例えば上記htmlでは、targetとredがついていて、redをblueにしたい場合は、

const element = document.querySelector('.target');
element.classList.replace('red', 'blue');

とするだけです。必ず変更する元のクラス、例でいうとredがある必要があります。もしredがない場合は変化はありません。
これは何かアクションがあった場合にクラスを変更してスタイルを変えるという時に使えます。

jsでダイレクトにstyleを変更するのは、cssでできないことをやるほうが良いのかなと。例えばjsで計算してその値を反映させたいとか。ある場面になったらposition: relative;からfixedに値が変わるとか。
できるだけシンプルに、わかりやすくが良いかと。この方法はつまりjsはjsで、cssはcssで管理するということです。全部jsファイルでできたら便利やんと思いがちですが、こんがらがってきたり、妙なエラーが発見できないとかということになったりすることも。

Answer 5

とんだ勘違いしてしまったようなので削除します。。。