スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

連載-11 ジャバスクリプトでスタイルを変更する

 いままでスタイルシートの設定についていくつか書いてきましたが、これをマウスのクリックやマウスオーバーなどのイベント処理で変更したい場合の要点を書いておきたいと思います。
 一般的には、ID名がつけられたオブジェクトのスタイルを変更する場合は、

    ID名.style.スタイル名='スタイルの値';

と記述することで、スタイルの値を変更することができます。

 たとえば、ID名が text の色を赤に変更するには、

    text.style.color='red';

とスクリプト中に記述します。

 クリックイベントでの処理なら

    onclick="text.style.color='red'; ですね。

 ただ、スタイル名が text-align や background-color などのように、ハイフン(-)で結ばれているものの場合、そのまま記述しても機能しない。
 この場合は、ハイフンを削除して次の文字を大文字に変更する。

    たとえば、text-align: center; へ変更する場合は
         textAlign='center'; と書く
    background-color は backgroundColor='red'; とかけばいい。

 これだけ覚えておけば、イベントのスクリプトで自由にスタイルを変更することができるようになるので、たのしくなることは受けあい。

 ぜひ試してください。

<
ここをくりっくすれば色がかわります


ソースです(<>は半角に変更してください)
<span style="font-size:1px;color:white;"><<div id="t080320" style="font-size:16px;padding-top:80px;width:550px;height:200px;background-color:black;text-align:center;" onclick="if(t080320.style.color=='white'){t080320.style.color='black';t080320.style.backgroundColor='#cc99cc';}else{t080320.style.color='white';t080320.style.backgroundColor='black';}">ここをくりっくすれば<br/>色がかわります</div></span>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。