JavaScriptを使ってCSSを変更する - ダミー - ソーシャルメディア 2025

JavaScriptを使用してWebページのHTMLを変更できるのと同じように、CSSスタイルを変更することもできます。このプロセスは非常に似ています。

最初に、適用するエレメントを選択するか、スタイルを変更します。たとえば、ロボットの左目を選択するには、次のコードを使用できます。

document。 getElementById（ "lefteye"）

要素を選択した後、スタイルプロパティをセレクタにアタッチし、次に変更するスタイルを追加してスタイルを変更できます。左目の色を変更するには、このJavaScriptを使用します：

<！ - 1 - >

文書。 getElementById（ "lefteye"）。スタイル。 backgroundColor = "紫";

あなたはこのコードについて何か変わったことに気づいていますか？ JavaScriptでスタイルを変更する場合、2つのルールがあります：

CSSプロパティが余白または枠線のように1つの単語だけである場合、同じCSS名を使用してJavaScriptのスタイルを変更できます。
CSSプロパティにダッシュ（ - ）が付いている場合、CSSプロパティ名はcamelCaseに変換されます。したがって、背景色はbackgroundColorに変更されます。
<！

CSSプロパティ

JavaScriptスタイルプロパティ	background-color
backgroundColor	CSSプロパティの例と、JavaScriptでの各プロパティの綴りの例を次に示します。 border-width
border-width	border-width
border-width	font-family
align	textAlign
color	color
<！ JavaScriptは大文字小文字を大事にしています。プロパティを動作させるには、JavaScriptスタイルのプロパティの大文字が必要です。

JavaScriptを使ってCSSを変更する - ダミー