【Javascript】クロスブラウザを制する 2-35 レイヤーリサイズ

<script type='text/javascript'>
<!--
   function resizeByLAYER(layName,offsetx,offsety){     if(window.opera){                        //opera       var oj = document.getElementById(layName).style       oj.pixelWidth  = oj.pixelWidth  + offsetx       oj.pixelHeight = oj.pixelHeight + offsety     } else if(document.getElementById){      //e5,e6,n6,n7,m1用       var oj = document.getElementById(layName).style       oj.width  = parseInt(oj.width)  + offsetx+'px'       oj.height = parseInt(oj.height) + offsety+'px'     } else if(document.all){                 //e4用       var oj = document.all(layName).style       oj.pixelWidth  = oj.pixelWidth  + offsetx       oj.pixelHeight = oj.pixelHeight + offsety     } else if(document.layers)               //n4用       document.layers[layName].resizeBy(offsetx,offsety)   }  

  function setBGCOLOR(layName,color){
    //opera は透明が効かないのでページ背景色と同色へ便宜修正
    if(color=='')(!!window.opera)?color='white':color='transparent';
    if(document.getElementById)       //e5,e6,n6,n7,m1,o6用
      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 
    }
  }

  function setBGIMG(layName,image){ 
    if(document.getElementById)             //e5,e6,n6,n7,m1,o6用
      document.getElementById(layName).style.backgroundImage 
         = (image=='')?'':'url('+image+')'
    else if(document.all)                   //e4用
      document.all(layName).style.backgroundImage='url('+image+')'
    else if(document.layers)                //n4用
      document.layers[layName].background.src=(image=='')?null:image
  }


//-->
</script>

<!--↓このレイヤ?のサイズが変ります///////////-->
<div id="lay0"
     style="position         : absolute  ;
            width            : 100px     ;/* ←必須 */
            height           : 50px      ;/* ←必須 */
            left             : 100px     ;
            top              : 100px     ;">
 T E S T 
</div>

<form>
<input type="button" style="width:450px"
       value="背景画像無し、背景色#ffcc00、幅+20px 高さ+10px にリサイズ"
       onclick="setBGIMG('lay0','');
                setBGCOLOR('lay0','#ffcc00');
                resizeByLAYER('lay0',20,10)"><br>


<input type="button" style="width:450px"
       value="背景画像有り、背景色無し、幅-10px 高さ-10px にリサイズ"
       onclick="setBGIMG('lay0','./300300.gif');
                setBGCOLOR('lay0','');
                resizeByLAYER('lay0',-10,-10)">
</form>




* 緑文字が今回の関数
* 赤文字がこのスクリプトで最初に動作する部分