divタグのレイヤー質問

私は2つの事業部層divタグのレイヤー質問

<div id="div1"> One </div> 
<div id="div2"> Two </div>

を持っていたと私はそれらの両方が

を重ねることにしたいと私はボタンをクリックしたときに、私は路Div1層がバックグラウンドで行きことをしたいです最上位層はDiv2になるはずです。

JavaScriptでどのように達成できますか？

出典

2011-01-22 Yahoo

z-indexはCSSで設定されている場合、あなたはそう直接element.style.zIndexを取得し、要素の計算されたスタイルを取得する必要があります動作しません。これは他のブラウザに比べてIEに異なる方法で実装されているので、のは、計算されたスタイルを取得する関数を作成してみましょう：

var getCompStyle = function(id) { 
    var curStyle; 
    if (window.getComputedStyle) { 
     curStyle = window.getComputedStyle(document.getElementById(id), null); 
    } else { 
     curStyle = document.getElementById(id).currentStyle; 
    } 
    return curStyle; 
};

我々はこの機能を持っていたら、私たちはそれに応じて、ボタンのクリックハンドラに添付z-indexを適用することができます。

document.getElementById('switch').onclick = function(e) { 
    var div1style = getCompStyle('div1'); 
    var div2style = getCompStyle('div2'); 
    var switcher = div1style.zIndex; 
    document.getElementById('div1').style.zIndex = div2style.zIndex; 
    document.getElementById('div2').style.zIndex = switcher; 
};

私はa fiddle example here (link)をデモするために作成しました。

出典

2011-01-22 15:58:41 mVChr

ボタンの値を変更するにはどうすればよいですか？ DIV 1が表示されているときにボタンの値が「1」であり、2nd Divが表示されているときに値が「2」になるはずです – Yahoo

これを行うために例のリンクが更新されました。この動作がどのように達成されたかをもう一度確認するには、 – mVChr

私が読んだところから、あなたはただ一つを見せて、もう一方を隠したいと思っていますか？あなたはCSSでdisplayとそれを行うことができます。あなたがそれを行う方法はここにあります。

<div id="div1">One</div> 
<div id="div2" style="display:none;">Two</div> 
<button onClick="change_layer()">Change the Layer</button> 


function change_layer(){ 
    document.getElementById("div1").style.display = "none"; 
    document.getElementById("div2").style.display = "block"; 
}

また、JQueryを使用することもできますが、これがすべて必要な場合は、おそらくJQueryは必要ありません。実際にそれらをレイヤーにしたい場合は、z-indexをCSSで使用する必要があります。

出典

2011-01-22 15:45:15 Will

をオーバーラップさせるには、position:relativeをdiv1に設定し、div2をdiv1の子として設定します。 div2にはposition:absolute; top:0px; left:0px; width:100%;を設定します。

<div id="div1"> 
    <div id="div2"></div> 
</div>

ジャバスクリプト -

document.getElementById("div1").onclick = function(){ 
     //by "Div1 layer to go in the background" i assume you mean disappear or hide 
     this.style.display = 'none'; 
     document.getElementById("div2").style.display = 'block'; 
};

出典

2011-01-22 15:45:46 naiquevin

垂直位置を "Zインデックス" パラメータを使用して、CSSで制御されます。要素の「スタイル」パラメータにアクセスすることで、これをjavascriptで設定することができます。

はここに注意するトリッキーなスポットを示すコメントで、完全な例です：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type='text/css'> 
      .container { 
       /* Needs explicit positioning for "absolute" positioning of 
        child elements to work properly */ 
       position: relative; 
       /* Need to set height, because absolute-positioned child elements take up no space */ 
       height: 50px; 
      } 
      #div1, #div2 { 
       position: absolute; 
       left: 0; 
       top: 0; 
       width: 100px; 
       height: 50px; 
       /* without a background color, you'll see div1 through div2. */ 
       background-color: white; 
       /* border makes it easier to see while testing */ 
       border: 1px solid red; 
      } 
     </style> 
     <script type='text/javascript'> 
      function swapDivs() { 
       var div1 = document.getElementById('div1'); 
       var div2 = document.getElementById('div2'); 
       // swap zIndex values. 
       var temp = div1.style.zIndex; 
       div1.style.zIndex = div2.style.zIndex; 
       div2.style.zIndex = temp; 
      } 
     </script> 
    </head> 
    <body> 
     <div class='container'> 
      <div id="div1" style='z-index: 0;'> One </div> 
      <div id="div2" style='z-index: 1;'> Two </div> 
     </div> 
     <input id='switch' type='button' value='switch' onclick='swapDivs();' /> 
    </body> 
</html>

出典

2011-01-22 15:46:35 user85461

これは機能します！ :)ボタンの値を変更するにはどうすればいいですか？ DIV 1が表示されているときにボタンの値が「1」であり、2nd Divが表示されているときに値が「2」になるはずです – Yahoo

答えて

関連する問題