JS(ジャバスクリプト)の小技

ワンクリックで文字サイズの変更
文字サイズ150%
文字サイズ100%(標準)
文字サイズ75%
<head></head>内に
<script type="text/javascript">
function fontsize(size){
document.getElementById("font").style.fontSize=size+'%';
}
</script>
と書いて、文字サイズを変えたい要素にid="font"とID指定。
この例では<dl id="font"></dl>と指定しています。
変更ボタンは<a href="javascript:fontSize(150);">サイズ変更</a>としてリンク。 数値部分を変えれば文字サイズも変わります。
コピーライトの年書き出し
Copyright© ■■■ All Rights Reserved.
西暦の部分を自動的に書き出すスクリプト。
表示させたい部分に
<script type="text/javascript">
document.write(new Date().getFullYear());
</script>
と書くだけ。
開閉するメニュー

ここをクリック

クリックすると下部メニューが開閉するスクリプト。 ブログ風な「続きを読む」などにも使えます。 javascriptソースは
function windowOpen(id){
if(document.getElementById(id).style.display=='none'){
document.getElementById(id).style.display='block';
}
else{
document.getElementById(id).style.display='none';
}
}
初期状態で閉じている下部メニューに任意のIDを指定して、さらにスタイルシートでdisplay: none;を指定。
この例では<ul id="mado" style="display: none;"></ul>としています。
そしてクリックボタンとなる部分 にa要素でhref="javascript:windowOpen('指定した任意のID');"と指定します。
この例では<a href="javascript:windowOpen('mado');">ここをクリック</a>。
スポンサード リンク