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

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