teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コード追加

2020/10/06 04:51

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -1,3 +1,37 @@
1
1
  CSS変数を使ってスタイルを設定して、JavaScriptでCSS変数の値を変更すればどうでしょう。
2
2
 
3
- [CSS変数をJavaScriptで動的に変更し、複数のスタイルに一括適用する \| Black Everyday Company](https://kuroeveryday.blogspot.com/2018/03/change-css-valiables-by-javascript.html)
3
+ [CSS変数をJavaScriptで動的に変更し、複数のスタイルに一括適用する \| Black Everyday Company](https://kuroeveryday.blogspot.com/2018/03/change-css-valiables-by-javascript.html)
4
+
5
+ ```html
6
+ <input type="button" value="変更" onclick="change()">
7
+
8
+ <input type="button" value="test">
9
+ <input type="button" value="test" class="btn_color">
10
+ <input type="button" value="test">
11
+ <input type="button" value="test" class="btn_color">
12
+ <input type="button" value="test">
13
+ <input type="button" value="test" class="btn_color">
14
+ ```
15
+
16
+ ```css
17
+ :root {
18
+ --btn-color1: green;
19
+ --btn-color2: orange;
20
+ }
21
+ input[type="button"].btn_color{
22
+ color: #000;
23
+ background-color: var(--btn-color1);
24
+ }
25
+ input[type="button"] {
26
+ color: #000;
27
+ background-color: var(--btn-color2);
28
+ }
29
+ ```
30
+
31
+ ```js
32
+ function change() {
33
+ const root = document.documentElement;
34
+ root.style.setProperty("--btn-color1","red");
35
+ root.style.setProperty("--btn-color2","blue");
36
+ }
37
+ ```