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

前提・実現したいこと

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">

m.ts10806

2020/10/06 01:27

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

行動規範の内容に同意します

回答3件

これが質問者さんのルール的にセーフかわかりませんが、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

ベストアンサー

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}