<web theme =" plot.inbow.rainbow ">
ＷＥＢテーマの基本、それは視聴者の目の保護でした。
それでは、背景色のカラーチェンジを実装します。
以下のサンプルを、ヘッドエリアにコピペします。
<head>
<script type="text/javascript">
function chbg1() {
var pon = document.getElementById("color_pon")
pon.style.background="red";//本文背景あか
pon.style.color="pink";//文字色
document.body.style.background="";//plus side off
}
function chbg2() {
var pon = document.getElementById("color_pon")
pon.style.background="black";//本文背景くろ
pon.style.color="gray";//文字グレイ
document.body.style.background="";//plus side off
}
function chbg8() {
var pon = document.getElementById("color_pon")
pon.style.background="rgba(0)";//本文背景 plus透明
pon.style.color="rgba(0)";//文字色 plus透明
document.body.style.background="black";//plus side ON
}
</script>
</head>
次に、ボディーの中へ設定です。
<body>
<div id="color_pon">
上記のディブＩＤカラーポンを設置して下さい。<br>
ここに、本文や、ボタン を配置します。<br>
</div>
</body>
上は、ボタンのデモになります。
下は、３つのボタンコードです。
<div class="switch_pon" ><!--CSS-->
<button onClick="chbg1()"
style="background-color:red;
color:white; cursor:pointer;" ><p>背景</p> </button>
<button onClick="chbg2()"
style="background-color:rgba(100,100,100,0.9);
color:white; cursor:pointer;"><p>カラーポン</p> </button>
<button onClick="chbg8()"
style="background-color:rgba(240, 240, 0, 0.7);
color:white; cursor:pointer;"><p>プラスサイド</p></button>
</div>
次に、
/* ＣＳＳで id="color_pon" の形を整えます。 */
#color_pon {
margin: 0 auto 0; /*本文エリアの自動なかよせ*/
width:830px; /*本文エリアの幅 一例 830px */
background-color:rgb(0, 0, 0); /*背景くろ*/
color:rgb(200,200,200); /*文字グレイ*/
}
おわりです。ふ～
ボタンの追加は、function chbg1 2...8...(){ }
スイッチの数だけ設定します。
緑色コード "" 空値の説明！
document.body.style.background="";
function chbg8 背景色 "black"
を他では "" 空にし
ボタン相互の影響を解いています。
最後に
スクリプトの /*コメントは*/
念のために消してください。
お疲れ様でした。
k 猫の手もかりて、