方法1: getElementByIdを使用してスタイルを変更する
JavaScriptのgetElementByIdメソッドを使用すると、id属性を持つHTML要素にアクセスできます。要素のスタイル属性を変更するには、以下のようなコードを使用します。
<!DOCTYPE html>
<html>
<body>
<h1 id="myHeading">Hello World!</h1>
<script>
// idがmyHeadingの要素を取得
var heading = document.getElementById("myHeading");
// スタイル属性を変更
heading.style.color = "red";
heading.style.fontSize = "24px";
</script>
</body>
</html>上記のコードでは、idが"myHeading"である要素のスタイル属性を変更しています。色を赤色に、フォントサイズを24ピクセルに変更しています。
方法2: querySelectorを使用してスタイルを変更する
querySelectorメソッドを使用すると、CSSセレクターを使用して要素を選択できます。以下の例では、クラス名を使用して要素を選択し、スタイルを変更しています。
<!DOCTYPE html>
<html>
<body>
<p class="myParagraph">This is a paragraph.</p>
<script>
// クラス名がmyParagraphの要素を取得
var paragraph = document.querySelector(".myParagraph");
// スタイル属性を変更
paragraph.style.backgroundColor = "yellow";
paragraph.style.padding = "10px";
</script>
</body>
</html>上記のコードでは、クラス名が"myParagraph"である要素のスタイルを変更しています。背景色を黄色に、パディングを10ピクセルに変更しています。
これらの方法を使用すると、JavaScriptを介してHTML要素のスタイル属性を動的に変更できます。必要に応じて他のスタイルプロパティも変更することができます。