MozTW 討論區
https://forum.moztw.org/

相容於不同版本瀏覽器之初始設定
https://forum.moztw.org/viewtopic.php?f=13&t=5275		 第 1 頁 (共 1 頁)
發表人:  Carousel [ 2004-12-26, 17:53 ]
文章主題 :  相容於不同版本瀏覽器之初始設定
常看到討論中提到有關W3C標準
版子中似乎這類文章少了
因此,提出自己的版本來供各位參考指正
以下的程式碼

首先定義版本參數

代碼:
ns4    = (document.layers);
ns6    = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >=5))
ie4    = (document.all);
ie5      = ((parseInt(navigator.appVersion) == 4) && (navigator.appName.indexOf("msie 5.0") != -1));
ie55     = ((parseInt(navigator.appVersion) >= 4) && (navigator.appName.indexOf("msie 5.5") != -1));
ie6     = (parseInt(navigator.appVersion) >= 4);
ver4    = (ns4 || ie4);
mac45    = (navigator.appVersion.indexOf("MSIE 4.5") != -1)
isMac    = (navigator.appVersion.indexOf("Mac") != -1);


接下來,定義一個名為init()的初值化函式

代碼:
var layerRef="null",layerStyleRef="null",styleSwitch="null",nostyleSwitch="null";
var widthClipSwitch="null";
var heightClipSwitch="null";
var bWidth,bHeight,offsetX,offsetY;
var layerTop,layerLeft;
var pxSwtch;
var topStop;

function init(){
   
   if (ns4) {
      layerStyleRef="layer.";
      layerRef="document.layers[";
      styleSwitch="]";
      pxSwitch="";
      layerTop=".top";
      layerLeft=".left";
      widthClipSwitch="].clip.right";
      heightClipSwitch="].clip.bottom";
      offsetX= "window.pageXOffset";
      offsetY= "window.pageYOffset";
      bHeight=window.innerHeight;
      bWidth= window.innerWidth;
      ns4=true;
   }
   if (ie4){ // mean ie4,ie5,ie5.5 or above
      layerStyleRef="layer.style.";
      layerRef="document.all[";
      styleSwitch="].style";
      nostyleSwitch="]";
      pxSwitch='px';
      layerTop=".pixelTop";
      layerLeft=".pixelLeft";
      widthClipSwitch=".clientWidth";
      heightClipSwitch=".clientHeight";
      offsetX= "document.body.scrollLeft";
        offsetY= "document.body.scrollTop";
        bHeight=document.body.clientHeight;
        bWidth= document.body.clientWidth;
        ie=true;
   }
   
   if (ns6){
      layerStyleRef="layer.style.";
      layerRef="document.getElementById(";
      styleSwitch=").style";
      nostyleSwitch=")";
      pxSwitch='px';
      layerTop=".top";
      layerLeft=".left";
      widthClipSwitch=".offsetWidth";
      heightClipSwitch=".offsetHeight";
      offsetX= "window.pageXOffset";
      offsetY= "window.pageYOffset";
      bHeight=window.innerHeight;
      bWidth= window.innerWidth;
        ns6=true;
   }
}


使用的方法,在BODY標籤裡加入

onload="init();"

如

代碼:
<body onload="init();">


其他的函式可以自行設計, 舉例如下

代碼:
function showLayer(layerName){
   eval(layerRef+'"'+layerName+'"'+styleSwitch+'.visibility="visible"');
}
   
function hideLayer(layerName){
   eval(layerRef+'"'+layerName+'"'+styleSwitch+'.visibility="hidden"');
}

function moveLayerto(layerName,top,left){
   eval(layerRef+'"'+layerName+'"'+styleSwitch+'.top=top');
   eval(layerRef+'"'+layerName+'"'+styleSwitch+'.left=left');
}

這些函式分別是顯示圖層,隱藏圖層,把圖層移到指定位置

使用時,例如先宣告一個圖層

代碼:
<div id="layerName" style="............">
...........
,/div>


而要隱藏時,即可使用(以按鈕為觸動例)

代碼:
<input type="button" value="Hide Layer" onclick="hideLayer('layerName');">


以上程式碼為本人自行撰寫,歡迎取用與修正及隨便散佈
更歡迎提出改進建議及討論
發表人:  member [ 2004-12-26, 23:39 ]
文章主題 : 
很不錯的 JavaScript 範例.
發表人:  訪客 [ 2004-12-27, 12:21 ]
文章主題 : 
代碼:
<script>
function toggleLayer(aID) {
var t = document.getElementById(aID).style;
t.visibility = (t.visibility != 'hidden') ? 'hidden' : 'visible';
}
</script>
<input onclick="toggleLayer('aLayer')" type="button" value="test" />
<div id="aLayer" style="background: lime; height: 100px; width: 100px;"></div>


亂寫的, 但比較接近W3C標準的形式...
發表人:  Carousel [ 2004-12-27, 12:43 ]
文章主題 : 
Anonymous 寫:
代碼:
<script>
function toggleLayer(aID) {
var t = document.getElementById(aID).style;
t.visibility = (t.visibility != 'hidden') ? 'hidden' : 'visible';
}
</script>
<input onclick="toggleLayer('aLayer')" type="button" value="test" />
<div id="aLayer" style="background: lime; height: 100px; width: 100px;"></div>


亂寫的, 但比較接近W3C標準的形式...


兩種型式

第一種, 例如我的例子

代碼:
document.getElementById(layerName).style.property=


其中 property 是屬性, 例如 visibility

第二種, 例如您的例子
代碼:
var obj=document.getElementById(layerName).style;


使用時則為
代碼:
obj.property
或
obj.method


這兩者都可行
看開發人員接受的程度
如果物件導向概念夠的人
我建議採您的模式, 開發上較順利
但對於初探 DOM 模式者
可參考我的例子, 或許比較容易懂些

感謝您的參與討論
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/