質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

19292閲覧

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

yukina00235

総合スコア63

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/02/19 05:13

編集2021/02/20 03:32

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

javascript

1 <h1 id="title">あいうえお</h1> 2 3 <script> 4 let hoge = document.getElementById("title"); 5 6 hoge.style.fontSize = "50px"; 7 hoge.style.color = "red"; 8 hoge.style.textAlign = "center"; 9 </script> 10

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

jquery

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

javascript

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

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

投稿2021/02/19 05:20

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hjds

2021/02/19 05:43

勉強になりました
yukina00235

2021/02/20 03:33

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

0

こんにちは。

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

js

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

投稿2021/02/19 05:24

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hjds

2021/02/19 05:42

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

2021/02/19 05:43

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

2021/02/20 03:34

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

0

ベストアンサー

element.style

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

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

セレクタ

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

HTML

1<style> 2 .hoge { 3 font-size: 50px; 4 color: red; 5 text-align: center; 6 } 7</style> 8<h1 id="title1">あいうえお</h1> 9<h1 id="title2">かきくけこ</h1> 10<h1 id="title3">さしすせそ</h1> 11 12<script> 13 for (let h1 of document.getElementsByTagName('h1')) { 14 h1.classList.add('hoge'); 15 } 16</script>

CSSStyleSheet#insertRule

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

HTML

1<style></style> 2<h1 id="title1">あいうえお</h1> 3<h1 id="title2">かきくけこ</h1> 4<h1 id="title3">さしすせそ</h1> 5 6<script> 7 const styleSheets = document.styleSheets; 8 9 styleSheets[styleSheets.length - 1].insertRule(`.hoge { 10 font-size: 50px; 11 color: red; 12 text-align: center; 13 }`); 14 15 for (let h1 of document.getElementsByTagName('h1')) { 16 h1.classList.add('hoge'); 17 } 18</script>

Re: yukina00235 さん

投稿2021/02/19 07:47

think49

総合スコア18189

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/02/19 07:56

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

2021/02/19 08:10

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

2021/02/19 08:43

ありがとうございます。 その場合、クラス指定による「スタイル情報の変化」についても意味論に影響を与えることになるかと思いますが、そちらが「セマンティクス的にNG」とならないのは、属性によって意味を付与するのはよいという考えによるものですか? 「属性の変化による意味論的変化を伴わないスタイル情報の変化は、望ましくない」ということでしょうか? つまり、「スタイル情報を変化させる意図として意味論的変化の伝達があるはずだが、スタイルのみを付与することによって、意図した意味論的変化を伝えることに失敗している」というようなご意見ですか? 重ねての質問、失礼いたしますが、よろしければお教えください。
think49

2021/02/19 09:12

ご認識の通りです。 「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

2021/02/19 09:34

なるほど、よくわかりました。 逆に言えば、同時にWAI-ARIA属性などを付与するのであれば、style属性を直接操作してもセマンティクスの問題は発生しないということですね(そんなことをする人はいないでしょうけれど)。 大変勉強になりました、ありがとうございます。 横からの質問、大変失礼いたしました。
think49

2021/02/19 12:32 編集

> 逆に言えば、同時にWAI-ARIA属性などを付与するのであれば、style属性を直接操作してもセマンティクスの問題は発生しないということですね WAI-ARIA属性を使用する場合、「属性セレクタ」で各種 role/state を参照可能な為、style属性を必要とする場面はないと思います。 https://momdo.github.io/wai-aria-1.2/#introstates > ほとんどのモダンなユーザーエージェントは、CSS属性セレクター([CSS3-SELECTORS])をサポートし、同等の機能を実現するのに必要なスクリプトの量を減らす、WAI-ARIA属性情報に基づくUIの変更を著者に作成できるようにする。
guest

0

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

投稿2021/02/19 05:23

編集2021/02/19 05:50
hjds

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問