setBGCOLOR()
レイヤ−の背景色を指定するサンプルファンクションです。
n4では
bgColorへ、
それ以外は
backgroundColorへ色を代入することで指定します。
この時n4はスタイル定義でwidthとheightとclipが指定されていないとうまく背景色ブロックを
塗りつぶしてくれませんので要注意です。また、n4はＣＳＳのbackground-color
が機能しませんのではじめから色を付けたい時はこのファンクションをonLoadで起動させて使います。
色の指定が空白または'transparent'だった時は透明になります。
opera6は透明が効かないので'white'と描いてある部分を適宜ページの背景色に指定して対応して下さい
（関数内の最初の3行はこのOpera6対策なので対応が不要なら削除してもかまいません）。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合
Syntax : setBGCOLOR('レイヤ−名',色)
function setBGCOLOR(layName,color){
//opera6 は透明が効かないのでページ背景色と同色(ここではwhite)へ便宜修正
if(color=='')(navigator.userAgent.search("Opera(\ |\/)6")!= -1)
?color='white':color='transparent'; //←このwhiteを背景色に書換える
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.backgroundColor =color
else if(document.all) //e4用
document.all(layName).style.backgroundColor=color
else if(document.layers){ //n4用
if(color=='transparent')color=null
document.layers[layName].bgColor=color
}
}
Example
<script type='text/javascript'>
<!--
function setBGCOLOR(layName,color){
//opera6 は透明が効かないのでページ背景色と同色(ここではwhite)へ便宜修正
if(color=='')(navigator.userAgent.search("Opera(\ |\/)6")!= -1)
?color='white':color='transparent'; //←このwhiteを背景色に書換える
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.backgroundColor =color
else if(document.all) //e4用
document.all(layName).style.backgroundColor=color
else if(document.layers){ //n4用
if(color=='transparent')color=null
document.layers[layName].bgColor=color
}
}
//-->
</script>
<!--↓このボタンをクリックすると/////////////////////-->
<form>
<input type="button" value="green"
onClick="setBGCOLOR('test','green')">
<input type="button" value="orange"
onClick="setBGCOLOR('test','orange')">
</form>
<!--↓このレイヤ−の背景色が変わります////////////////-->
<div id="test"
style="position : absolute ;
left : 50px ;
top : 50px ;
width : 400px ;
height : 200px ;
clip : rect(0,400,200,0);">
このレイヤ−の背景色を変えます
</div>
//--オブジェクト名で処理する場合
上記の関数をレイヤー名の代わりにオブジェクトで処理するようにしたもの。
ブラウザ毎の実装オブジェクト処理が別立てになるので関数がシンプルになる。
Syntax : setBGCOLORoj(オブジェクト,色)
function setBGCOLORoj(oj,color){
//opera6 は透明が効かないのでページ背景色と同色(ここではwhite)へ便宜修正
if(color=='')(navigator.userAgent.search("Opera(\ |\/)6")!= -1)
?color='white':color='transparent'; //←このwhiteは背景色に書換える
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
oj.backgroundColor =color
else if(document.all)
oj.backgroundColor=color //e4用
else if(document.layers){ //n4用
if(color=='transparent')color=null
oj.bgColor=color
}
}
Example
<script type='text/javascript'>
<!--
function setBGCOLORoj(oj,color){
//opera6 は透明が効かないのでページ背景色と同色(ここではwhite)へ便宜修正
if(color=='')(navigator.userAgent.search("Opera(\ |\/)6")!= -1)
?color='white':color='transparent'; //←このwhiteは背景色に書換える
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
oj.backgroundColor =color
else if(document.all)
oj.backgroundColor=color //e4用
else if(document.layers){ //n4用
if(color=='transparent')color=null
oj.bgColor=color
}
}
//--layNameで指定したオブジェクトを返す(必ずonload後に実行すること)
function getLayStyleOj(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return document.getElementById(layName).style
else if(document.all) //e4用
return document.all(layName).style
else if(document.layers) //n4用
return document.layers[layName]
}
//-->
</script>
<!--↓このボタンをクリックすると/////////////////////-->
<form>
<input type="button" value="green"
onClick="setBGCOLORoj(getLayStyleOj('test'),'green')">
<input type="button" value="orange"
onClick="setBGCOLORoj(getLayStyleOj('test'),'orange')">
</form>
<!--↓このレイヤ−の背景色が変わります////////////////-->
<div id="test"
style="position : absolute ;
left : 50px ;
top : 50px ;
width : 400px ;
height : 200px ;
clip : rect(0,400,200,0);">
このレイヤ−の背景色を変えます
</div>