使用できるスクリプト判断し、文字サイズを変更する
getElementByIdメソッド、allメソッドの両方、あるいは片方をサポートしたブラウザで実行され、サポートしていないブラウザではエラーを起こさないスクリプトのサンプルは、次のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Sample_2</title> <script type="text/javascript"> <!-- function C_Font(F_Size){ if(document.getElementById){ document.getElementById("Sty").style.fontSize=F_Size }else{ if(document.all){ document.all("Sty").style.fontSize=F_Size } } } //--> </script> <style type="text/css"> <!-- body { background-color: #ffffff; } #Sty { font-size: 14px } --> </style> </head> <body> *フォントサイズを変更する <p> <div id="Sty" onMouseOver="C_Font('22px')" onMouseOut="this.style.fontSize = C_Font('14px')"> この文字の上にマウスを持ってくると、<br> 文字のサイズが変わります。 </div> </P> </body></html>
実行結果
文字の上にマウスカーソルが来た時には、フォントサイズが変わり、マウスカーソルが離れた時には、初期状態に戻ります。
サンプルでは、id名で「Sty」と設定したdiv要素内に、マウスカーソルが来た時と離れた時、DOMのstyle属性を変更することによって、フォントサイズを変更しています。
div要素の設定は、31行目（<div id="Sty" onMouseOver="C_Font～の部分）となります。ここにマウスカーソルが来たときはイベントハンドラonMouseOverによって、マウスカーソルが離れたときはonMouseOutによって、関数C_Fontの処理を開始しています。それぞれのイベントハンドラでは、'22px'や'14px'といった具合に文字サイズの値を設定しています。この値は10行目のfunction C_Font(F_Size)の部分で、引数F_Sizeとして関数の処理に引き渡されます。
関数C_Fontでは、getElementByIdメソッドに対応したブラウザの場合if(document.getElementById)が真となります。このため、以降のdocument.getElementById("Sty").style.fontSize=F_Sizeが実行されます。
そして、その他のブラウザのうち、allメソッドに対応したブラウザは、else内に設定したif文の条件式if(document.all)が真となります。このため、document.all("Sty").style.fontSize=F_Sizeの処理が実行されます。
それぞれの処理では、style属性のfontSizeに、フォントサイズの値を持った引数F_Sizeを設定することによって、フォントサイズを変更しています。なお、getElementByIdメソッド、allメソッドのどちらもサポートしていないブラウザの場合は、どちらのスクリプトも実行しないので、エラーは発生しません。
判定順序について
ところで、サンプルの場合、getElementByIdメソッドをサポートしているブラウザを判断した後、allメソッドをサポートしているブラウザを判断しました。この順番を逆にしても、見かけ上の結果は変わりません。
function C_Font(F_Size){ if(document.all){ document.all("Sty").style.fontSize=F_Size }else{ if(document.getElementById){ document.getElementById("Sty").style.fontSize=F_Size } } }
この場合は、バージョン4以降のInternet Explorer、Operaといった、allメソッドをサポートしているブラウザはdocument.all("Sty").style.fontSize=F_Sizeの処理を行います。一方、Firefox、バージョン6以降のNetscape、Safariといった、allメソッドをサポートしていなくてgetElementByIdメソッドをサポートしたブラウザはdocument.getElementById("Sty").style.fontSize=F_Sizeの処理が実行されます。
しかしながら、allメソッドはDOMの仕様が確定する前に作られたInternet Explorer独自の仕様です。Operaもallメソッドをサポートしていますが、これはあくまでもInternet Explorerとの互換性を確保するためだと考えられます。このことからも、始めのサンプルのように、ローカルな仕様であるallメソッドではなく、なるべく多くのブラウザで、標準仕様に準拠したgetElementByIdメソッドを使ったスクリプトを実行できるようにすることをおすすめします。
また今回のサンプルの場合、次のようにelseを使ってif文を入れ子にしなくても見かけ上の結果は変わりません。
function C_Font(F_Size){
if(document.all){
document.all("Sty").style.fontSize=F_Size
}
if(document.getElementById){
document.getElementById("Sty").style.fontSize=F_Size
}
}
この場合、all・getElementByIdメソッド両方をサポートしたブラウザは、allメソッドの処理を実行した後、getElementByIdメソッドの処理を実行します。結果的には、getElementByIdメソッドの処理がブラウザ上に反映されるので、今回の場合if文を入れ子にした場合と同様の結果となります。
しかしこの用法だと、例えば文字を書き出すスクリプトの場合、allメソッド、getElementByIdメソッド両方の結果がブラウザに表示されてしまいます。このことからも、最初のサンプルのように、if文を入れ子にして特定のスクリプトのみを実行するようにした方がいいでしょう。
