開発ブログ

ページメニュー

<< 色のアクセシビリティ | main | 引用符で囲まれた値が何個かある時、一部の引用符だけを外す >>

カレンダー

<< April 2019 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>

  • DOMを使いこなそう-その1〜羞恥心ブログパーツ
  • 友達に、動的にページ内の値を変化させたい、ということを質問されて作ってみたものです。
    動作サンプルを表示
    ソースを表示(Javascriptファイル)

    ブログパーツ設置方法
    <script type="text/javascript" src="http://24th.jp/js/hexagon.js"  charset="utf-8" ></script>
    各ブログのブログパーツの設置は、本ブログではお答えできません。ごめんなさいm(_ _)m


    ソース解説
    DOMを使いこなすために、まず最初にgetElementByIdを憶えてしまいましょう。

    まず、特定のタグにid="xxxx"をつけて、
    オブジェクト変数=document.getElementById("xxxx")
    とすることで、指定したidをもつオブジェクトを取得できます。取得したオブジェクトは、innerHTMLを指定すればタグの包括要素を書き換えることができます。また、styleを指定することで、スタイル属性を変えることができます

    このように、オブジェクトの各種プロパティを参照及び書き換えを行えば、動的にページの情報を変更することができます。

    今回のブログパーツでは、divタグに「qus_area」というIDを割り振り、回答する都度、該当オブジェクトを取得してinnerHTMLを書き換えています。また、ボタンにbtn1,btn2というIDを割り振り、正回答に対し、disabled=trueとしてボタンを押せないようにし、誤回答に対しdisabled=falseとしてボタンを押せるようにしてみました。誤回答しか選べないクイズってのも珍しいですよね?^^



    軽くメモ
    script srcで外部ファイルを指定するとき、charset="文字コード"をつけないとちゃんと動作しないので注意。

| 開発関連 | 01:15 | comments(0) | trackbacks(0) |


コメント

コメントする

この記事のトラックバックURL

http://blog.24th.jp/trackback/904437