上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 第8回、一応今回でひとまず最終回、最後にスタイルシートをJavaスクリプトから直接操作する方法を紹介します。
 第一回で勉強した「innerHTML」で、「<style>~</style>」を出力させれば、同じようなことは出来ますが、何となく今回紹介するものの方がスムースな感じがします。




スタイルシートを操作する



document.getElementById("test").style.display="none";


 こんな感じで記述します。第一回の「innerHTML」と似ている感じがします。
 これも「innerHTML」の時同様、スタイルを操作する要素・例えば「<div id="test">~~~</div>」などを表示させた後に、Javaスクリプトを実行しなければなりません。

■「test」…これが、操作する要素の「ID名」です。

■「display="none"」…これが、スタイルシートの書き換え指定です。
 この場合はCSSの「display:none;」と同様の意味になります。
 書き方がちょっと変わっているので注意してください。

(例)

CSSJavascript
display:nonedisplay="none"
background-color:#ff9900backgroundColor="#ff9900"
font-size:12pxfontSize="12px"
background:url("sample.jpg") no-repeat
background="url('sample.jpg') no-repeat";


 こんな感じでCSSで「-」が付く場合は、ハイフンの次の文字を大文字にしてから記述します。




サンプル



 では、第7回「タイマー」で作った、0~1000(0~500に変更して)で数字が切り替わるスクリプトを使って、「width」の値を変化させてみると…






<button type="button" onclick="GOGOstart()">スタート</button>
<button type="button" onclick="GOGOstop()">ストップ</button>

<div id="test" style="width:0px;background:#09f;height:10px;"></div>

<script type="text/javascript">
aaa=0;
keisan=6;
function GOGO(){if (aaa>=500) {keisan=-6;
} else if (aaa<=-1) {keisan=6;
}
aaa=aaa+keisan;
document.getElementById("test").style.width=aaa+"px";
}

function GOGOstart(){
T1=setInterval('GOGO()',1);
}

function GOGOstop(){
clearInterval(T1);
}
</script>


■CSSの値の単位の使い方にも注意してください。CSSの値が「変数を使用した数値」の場合は「+"px"」で、単位の記号を「文字列結合」しています。



 お疲れ様でした。今回までで、ひとまずテンプレート屋が使いたくなるような、しかも単純シンプルなJavaスクリプトは組めるようになると思います。
 ランダムや季節なんかを考慮すれば、広告などの訴求にも利用できますし、スタイルシートをアニメーションさせれば、ちょっとだけブログデザインが楽しくなると思います。
 兎に角、スタイルシートとHTMLをこれで「動的」に書き換えることが出来るようになると思います。



■補足編「スクリプトをHEADに纏める」へ続きます。テンプレートを描く人は必見。
HEAD内にスクリプトを収める
このエントリーをはてなブックマークに追加
Sat.03.26.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。