RainbowMan

何でも虹色に変化させる

IE4+ , NN6+, Opera6+

Sample

文字色を変化

背景を変化

ボーダーも変化

Down Load

使い方

色を変化させたい要素に一意な ID を付ける。

e.g.
<p id="rainbow">sample</p>

rainbowman.js 内に ID と スタイル を書く。

var valuez = {
    "rainbow" : "color"  // "ID" : "Style"
}

左にＩＤを書き、コロンを挟んで右にスタイルを書く。

スタイルには以下のものがあります。

※ ID , スタイル共に大文字小文字は区別されます。

color: 文字色
backgroundColor: 背景色
borderColor: ボーダーの色

複数に対して変化させたい場合は ( , ) カンマで区切りながら記述する。

eXample;

<p id="rainbow01">sample</p>
<div><strong id="rainbow02">sample</strong></div>
<div><span id="rainbow03">sample</span></div>


var valuez = {
    "rainbow01" : "color" ,
    "rainbow02": "backgroundColor" ,
    "rainbow03": "borderColor"
}

後は <HEAD> ～ </HEAD> 間に

<script type="text/javascript" src="rainbowman.js"></script>

と書く。ファイル名、パスは必要に応じて変更する。

ボーダーに対して適用させる

ボーダーに対して適用させるには下準備が必要です。怠ると変化しません。例えば

<p id="sample">sample</p>

ではダメです。以下のように border-width と border-style を指定します。

<p id="sample"
    style="border-width: 1px; border-style: solid;">sample</p>
    
    又は
<p  style="border: 1px solid #ffffff;">

等など、スタイルシートを使ってください。

[PageTop] [Back]