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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1541閲覧

JavaScriptでstyleの記述の一部を動的に変更したい

afafa

総合スコア1

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/06 01:20

編集2020/10/06 01:24

前提・実現したいこと

JavaScriptで<style></style>内に書かれてる記述の一部を変更したいのですが、どうやるのでしょうか?
該当のソースコードで変更ボタンを押したら
.btn_color{
color: #000;
background-color: green;
}
のgreenをredに、
input[type="button"] {
color: #000;
background-color: orange;
}
のorangeがblueに全て変わり反映されるようにしたいです
ご存じの方よろしくお願いします

※このように1個1個やるというのは無しでお願いいたします
var el = document.getElementById('id名');
el.style.backgroundColor = "red";

該当のソースコード

html

1<style> 2body,html{ 3width:100%; 4height:100%; 5} 6.btn_color{ 7 color: #000; 8 background-color: green; 9} 10input[type="button"] { 11 color: #000; 12 background-color: orange; 13} 14</style> 15 16 17<input type="button" value="変更" onclick=""> 18 19<input type="button" value="test"> 20<input type="button" value="test" class="btn_color"> 21<input type="button" value="test"> 22<input type="button" value="test" class="btn_color"> 23<input type="button" value="test"> 24<input type="button" value="test" class="btn_color">

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

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

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

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

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

m.ts10806

2020/10/06 01:27

作業依頼に近い内容になっています。 ご自身でなにも調べたり試されてないのでしょうか
guest

回答3

0

これが質問者さんのルール的にセーフかわかりませんが、classをJavscriptで追加してCSSで色を変えるように書いてみました。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body,html{ width:100%; height:100%; } input[type="button"].btn_color { color: #000; background-color: green; } input[type="button"].btn_color.changed { background-color: red; } input[type="button"] { color: #000; background-color: orange; } input[type="button"].changed { background-color: blue; } </style> <script> function change() { [...document.querySelectorAll("input[type=button]")].forEach(function(el) { el.classList.add("changed"); }); } </script> </head> <body> <input type="button" value="変更" onclick="change()"> <input type="button" value="test"> <input type="button" value="test" class="btn_color"> <input type="button" value="test"> <input type="button" value="test" class="btn_color"> <input type="button" value="test"> <input type="button" value="test" class="btn_color"> </body> </html>

投稿2020/10/06 02:05

YakumoSaki

総合スコア2027

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

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

0

ベストアンサー

CSS変数を使ってスタイルを設定して、JavaScriptでCSS変数の値を変更すればどうでしょう。

CSS変数をJavaScriptで動的に変更し、複数のスタイルに一括適用する | Black Everyday Company

html

1<input type="button" value="変更" onclick="change()"> 2 3<input type="button" value="test"> 4<input type="button" value="test" class="btn_color"> 5<input type="button" value="test"> 6<input type="button" value="test" class="btn_color"> 7<input type="button" value="test"> 8<input type="button" value="test" class="btn_color">

css

1:root { 2 --btn-color1: green; 3 --btn-color2: orange; 4} 5input[type="button"].btn_color{ 6 color: #000; 7 background-color: var(--btn-color1); 8} 9input[type="button"] { 10 color: #000; 11 background-color: var(--btn-color2); 12}

js

1function change() { 2 const root = document.documentElement; 3 root.style.setProperty("--btn-color1","red"); 4 root.style.setProperty("--btn-color2","blue"); 5}

投稿2020/10/06 02:03

編集2020/10/06 04:51
hatena19

総合スコア33620

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

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

0

普通はそんなことはしません。
ただcssは同じレベルの指定はあとを優先するので
修正ではなく追加で対応できます。

投稿2020/10/06 01:59

yambejp

総合スコア114585

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

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

yambejp

2020/10/06 02:00

<script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelector('#btn').addEventListener('click',()=>{ var newStyle= if(document.querySelector('#newStyle')){ newStyle=Object.assign(document.createElement('style'),{ id:'newStyle', textContent: `.btn_color{background-color: red;} input[type="button"] {background-color: blue;}` }); document.querySelector('head').appendChild(newStyle); } }); }); </script> <input type="button" value="変更" id="btn">
yambejp

2020/10/06 02:00

ちゃんとやるなら、予めcssを用意しておいて クラスのつけ外しなどで切り替えます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問