要素のプロパティやスタイルの変更

  • はじめに JavaScriptのDOM操作について学びましょう。DOM操作では、HTML要素の選択や操作ができます。今回は、「要素のプロパティやスタイルの変更」について見ていきましょう。
Gal Normal

要素のプロパティやスタイルを変更するってどういうこと？

Geek Curious

HTML要素の属性や見た目を変えることができるんだよね？

Gal Happy

そうなの！JavaScriptでHTML要素のプロパティやスタイルを変更することができるわ！

  • 要素のプロパティの変更
Gal Pleased

要素のプロパティを変更するには、まず要素を選択して、その後プロパティ名に新しい値を代入するの。例えば、こんな感じ！

const titleElement = document.querySelector('#title');
titleElement.innerHTML = 'New Title';
Geek Happy

なるほど、要素を選択して、プロパティ名に新しい値を代入するんだね！

Gal Happy

そうなの！では、次にスタイルの変更について説明するね！

  • 要素のスタイルの変更
Gal Pleased

要素のスタイルを変更するには、選択した要素の style プロパティを使って、CSSプロパティ名に新しい値を代入するの。例えば、こんな感じ！

const titleElement = document.querySelector('#title');
titleElement.style.color = 'red';
Geek Happy

わかった！要素のスタイルを変更するには、 style プロパティを使って、CSSプロパティ名に新しい値を代入するんだね！

Gal Happy

そうなの！要素のプロパティやスタイルを変更することで、動的にページの内容や見た目を変えることができるわ！

  • おわりに JavaScriptのDOM操作では、要素のプロパティやスタイルの変更ができます。これで、ページの内容や見た目を動的に変えることができるようになりましたね！😀