回答編集履歴

2

訂正

2020/09/16 01:23

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

test CHANGED
@@ -68,7 +68,7 @@
68
68
 
69
69
 
70
70
 
71
- 動的に JavaScript で ``<style>`` を加える例
71
+ JavaScript で 動的に ``<style>`` を加える例
72
72
 
73
73
  (通常は 外部化したスタイルシートを扱います)
74
74
 
@@ -86,7 +86,7 @@
86
86
 
87
87
  mySheet.textContent = `
88
88
 
89
- body { backgroundColor: black; color:white; }
89
+ body { background-color: black; color:white; }
90
90
 
91
91
  a:link { color: green; }
92
92
 
@@ -102,6 +102,12 @@
102
102
 
103
103
  </script>
104
104
 
105
+ <!-- typo 修正:
106
+
107
+ backgroundColor => background-color
108
+
109
+ -->
110
+
105
111
  ```
106
112
 
107
113
 

1

追記

2020/09/16 01:23

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

test CHANGED
@@ -59,3 +59,51 @@
59
59
 
60
60
 
61
61
  繰り返しますが、**JavaScriptではなく、スタイルシートを使ってください**。
62
+
63
+
64
+
65
+ ----
66
+
67
+ 追記)
68
+
69
+
70
+
71
+ 動的に JavaScript で ``<style>`` を加える例
72
+
73
+ (通常は 外部化したスタイルシートを扱います)
74
+
75
+ ```html
76
+
77
+ <script>
78
+
79
+
80
+
81
+ var mySheet = document.createElement("style");
82
+
83
+
84
+
85
+ // LVHA 順(疑似セレクタは ":link"、":visited"、":hover"、":active" の順)で定義
86
+
87
+ mySheet.textContent = `
88
+
89
+ body { backgroundColor: black; color:white; }
90
+
91
+ a:link { color: green; }
92
+
93
+ a:visit { color: yellow; }
94
+
95
+ a:active { color:black; }
96
+
97
+ `;
98
+
99
+ document.querySelector("head").appendChild( mySheet );
100
+
101
+
102
+
103
+ </script>
104
+
105
+ ```
106
+
107
+
108
+
109
+ 他にも、[CSSOM](https://developer.mozilla.org/ja/docs/Web/API/CSS_Object_Model) を使う方法があります(難しい手法になりますので、説明は割愛します)。