アウトプットとして
インラインスタイルとは
HTML要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法。
JavaScriptでは,メソッドを使って指定した要素上に新しい属性を追加、または既存の属性の値を変更したり、属性を取得することができます。
setAttributeメソッド
指定した要素上に新しい属性を追加、または既存の属性の値を変更できます。
要素.setAttribute(name, value)
要素の取得の仕方はこちら
HTMLの要素を取得する方法
- nameは属性の名前を文字列で指定します。
- valueは属性に設定したい値を指定します。
例
HTML
<div id="test">テスト</div>
JavaScript
const sample = document.getElementById("test")
sample.setAttribute("style", "color: red;")
// <div id="test" style="color: red;">テスト</div> が取得できる
removeAttributeメソッド
指定した要素から、特定の属性を削除できます。書き方はsetAttributeと同じです。
要素.removeAttribute(name, value)
例
HTML
<div class="contents" id="apple">りんご</div>
JavaScript
const apple = document.getElementById("apple")
apple.removeAttribute("class", "contents")
// <div id="apple">りんご</div> が取得できる(class="contents"が取り除かれている）
getAttributeメソッド
要素上の指定した属性の値を戻り値として返します。
要素.getAttribute('属性名')
例
HTML
<div class="contents" id="apple">りんご</div>
JavaScript
const apple = document.getElementById("apple")
apple.getAttribute("class")
// => contents というclass名が取得できる
まとめ
以上のメソッドを活用することで
・カーソルを持っていくと文字の色が変わる
・クリックするとプルダウンメニューが現れる etc...
などの動きをブラウザで操作できるようになる（関数やif文など、色々なものと組み合わせる必要はあるけど）
追記(２０２２０２０１)
インラインスタイルを操作するという目的の場合、setAttributeよりstyleプロパティを使用したほうが簡単に書けることをコメントでいただきました！ありがとうございます！
//setAttribute
sample.setAttribute("style", "color: red;")
//styleプロパティ
sample.style.color = 'red';
//処理は両者とも同じ
※補足等ありましたらコメント頂けると幸いです