Question

假设我有两个Div图层

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

我希望它们两者重叠

当我点击按钮时我希望Div1图层在后台进行，顶层应该成为Div2。

我如何通过JavaScript实现它？

Answer 1

如果使用CSS设置z-index，则需要获取元素的计算样式，因此直接获取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)来演示。

Answer 2

使用“z-index”参数在CSS中控制垂直定位。您可以通过访问元素的“style”参数来使用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>

Answer 3

那么，从我读到的内容来看，你只想展示一个并隐藏另一个？您可以在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。如果您确实希望它们分层，则必须在css中使用z-index。

Answer 4

重叠可以通过将position:relative设置为div1并将div2设置为div1的子节点来完成。并为div2设置position:absolute; top:0px; left:0px; width:100%;。

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

javascript -

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';
};

Div标签的分层问题

4 个答案: