テックキャンプ62日目

kobasaです(´ω`*)木曜もJavaScriptの勉強の続きをしていました。
イベント発火条件をJavaScriptのプロパティで記述して、イベント内容をJavaScriptのプロパティで記述して。
当たり前ですがJavaScriptっていう別の言語の勉強してるんだな、っていう実感がようやく湧いてきた気がします。

62日目の勉強内容

JavaScriptでのスタイル操作:HTML要素に直接CSSの記述を付与する

setAttributeメソッド
要素.setAttribute(“name”, “value”) nameには属性名が入り、valueには付与したい値を入れる

removeAttributeメソッド
要素.removeAttribute(“name”, “value”) nameには属性名が入り、valueには削除したい値を入れる

cssを付与したいときはset、削除したいときはremoveを使う。
メニューボタンをマウスオーバーで背景色をset、マウスが離れたら背景色をremoveという使い方。
直接CSSの記述をするときは属性名が”style”、値には”background-color: red;”などCSSの記述が入る。

また、メニューボタンにマウスオーバーしたときにメニューボタンの背景色が変わるといった、
指定した要素へのアクションがきっかけでその要素にイベントが発生するときには、
要素名の代わりに要素自身を表すthisと記述できる。

要素の状態を条件式で使用する

getAttributeメソッド
要素.getAttribute(“属性名”)で指定した要素の属性値を取得する。
このメソッドとif文を組み合わせることにより、クリックによるプルダウンリストなどの表示・非表示を切り替えることができる。

if( 要素.getAttribute("style") == "display: block;" ){
  // プルダウンメニューが表示されているとき実行される。
  // "block"を取り除き、CSSファイルで設定済みの"hidden"に戻り要素が非表示になる。
  pullDownParents.removeAttribute("style", "display:block;")
} else {
  // プルダウンメニューが非表示のとき実行される。"block"を付与し要素が表示される。
  要素.setAttribute("style", "display:block;")
}

要素の指定には、変数にdocument.getElementById(“id名”)を代入することが多いので
HTMLファイルにも忘れずにid名を記述すること。

コメント

タイトルとURLをコピーしました