Javascript 如何将一个元素放置在与另一个元素完全相同的可见位置？_Javascript_Jquery_Html_Css_Positioning

Javascript 如何将一个元素放置在与另一个元素完全相同的可见位置？

javascript jquery html css

Javascript 如何将一个元素放置在与另一个元素完全相同的可见位置？,javascript,jquery,html,css,positioning,Javascript,Jquery,Html,Css,Positioning,我有两个元素“src”和“dest” “src”和“dest”位于不同的DOM节点中，不能具有相同的父节点我需要将“src”元素放置在与“dest”相同的可见位置 “src”元素的大小也必须与“dest”相同当“src”和“dest”具有相同的父级时，我有以下代码： src.css("position", "absolute"); src.css("top", dest.offset().top); src.css("left", dest.offset().left); src.width

我有两个元素“src”和“dest”

“src”和“dest”位于不同的DOM节点中，不能具有相同的父节点

我需要将“src”元素放置在与“dest”相同的可见位置

“src”元素的大小也必须与“dest”相同

当“src”和“dest”具有相同的父级时，我有以下代码：

src.css("position", "absolute");
src.css("top", dest.offset().top);
src.css("left", dest.offset().left);
src.width(dest.width());

// Show "src" element, instead of "dest". "src" must be in the same visible position, as "dest"
dest.css("opacity", 0);
src.show();

不幸的是，它不起作用。“src”元素有底部和左侧的位移，我找不到原因

也许，我做错了什么

如何正确处理两种情况

“src”和“dest”具有相同的祖父母

“src”和“dest”没有相同的父级。也许祖父母是两个人的共同点

更新：

我已经安排了一个简单的HMTL文档，它可以对一个元素与另一个元素进行简单的视觉交换：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MacBlog</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
    <style type="text/css" media="screen">
        .dest {
            background-color: #0cf;
            width: 480px;
            height: 320px;
        }
        .src {
            background-color: #09c;
            width: 1024px;
            height: 768px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        jQuery(function($){
            // Common items, to deal with
            var src = $(".src");
            var dest = $(".dest");
            // Setup
            src.hide();
            // Interaction
            dest.click(function(){
                src.width(dest.width());
                src.height(dest.height());
                src.offset(dest.offset());

                dest.hide();
                src.show();
            });

        });
    </script>
</head>
<body>
    <div>
        <!--On clicking, this element should visually be swapped by ".src" element -->
        <div class="dest"><p>dest</p></div>
        <div class="src"><p>src</p></div>
    </div>
</body>
</html>


MacBlog
德斯特先生{
背景色：#0cf；
宽度：480px；
高度：320px；
}
.src{
背景色：#09c；
宽度：1024px；
高度：768px；
}
jQuery（函数（$）{
//常见项目，处理
var src=$（“.src”）；
var dest=$（“.dest”）；
//设置
src.hide（）；
//相互作用
dest.click（函数（）{
src.width（dest.width（））；
src.height（dest.height（））；
src.offset（dest.offset（））；
dest.hide（）；
src.show（）；
});
});
目的地
src

它不能正常工作。在“交换”之后，“src”元素在大约30个像素上有一个奇怪的左上方向位移

如果有道理的话，我会使用最新版本的Safari 5

更新2：

不幸的是，这也不起作用。我更新了我的示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MacBlog</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script>
    <style type="text/css" media="screen">
        div {
            margin: 0;
            padding: 0;
        }
        .holder {
            position: relative;
            top: 40pt;
            left: 40pt;
            border: black solid thin;
        }
        .dest {
            background-color: #0cf;
            width: 480px;
            height: 320px;
        }
        .src {
            background-color: #09c;
            width: 1024px;
            height: 768px;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        jQuery(function($){
            // Common items, to deal with
            var src = $(".src");
            var dest = $(".dest");
            // Setup
            src.hide();
            // Interaction
            dest.click(function(){
                src.css("position", "absolute");
                src.width(dest.width());
                src.height(dest.height());
                src.offset(dest.offset());

                dest.hide();
                src.show();
            });

        });
    </script>
</head>
<body>
    <div class="holder">
        <!--On clicking, this element should visually be swapped by ".src" element -->
        <div class="dest"><p>dest</p></div>
        <div class="src"><p>src</p></div>
    </div>
</body>
</html>


MacBlog
div{
保证金：0；
填充：0；
}
.持有人{
位置：相对位置；
顶部：40磅；
左：40分；
边框：黑色实薄；
}
德斯特先生{
背景色：#0cf；
宽度：480px；
高度：320px；
}
.src{
背景色：#09c；
宽度：1024px；
高度：768px；
}
jQuery（函数（$）{
//常见项目，处理
var src=$（“.src”）；
var dest=$（“.dest”）；
//设置
src.hide（）；
//相互作用
dest.click（函数（）{
src.css（“位置”、“绝对”）；
src.width（dest.width（））；
src.height（dest.height（））；
src.offset（dest.offset（））；
dest.hide（）；
src.show（）；
});
});
目的地
src

您可以调用设置偏移量并正确处理不同的父级，如下所示：

dest.offset(src.offset());

div { 
    position:relative;
    margin: 0; 
    padding: 0; 
} 
.holder { 
    position: relative; 
    top: 40pt; 
    left: 40pt; 
    border: black solid thin; 
} 
.dest { 
    position:absolute;
    background-color: #0cf; 
    width: 480px; 
    height: 320px; 
} 
.src { 
    background-color: #09c; 
    width: 1024px; 
    height: 768px; 
}

您需要将

dest

元素设置为绝对值，否则

top

和

left

偏移将不适用

src.css('position', 'absolute'); // ensure position is set to absolute
src.offset(dest.offset());

此外，像

和body这样的元素将根据浏览器的不同使用默认样式表。因此，请尝试提供重置样式，以使事情保持一致：

p {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
}

我在这里测试过：

使用第二个示例，使CSS如下所示：

dest.offset(src.offset());

div { 
    position:relative;
    margin: 0; 
    padding: 0; 
} 
.holder { 
    position: relative; 
    top: 40pt; 
    left: 40pt; 
    border: black solid thin; 
} 
.dest { 
    position:absolute;
    background-color: #0cf; 
    width: 480px; 
    height: 320px; 
} 
.src { 
    background-color: #09c; 
    width: 1024px; 
    height: 768px; 
}

编辑：在玩了一些之后，它在所有情况下都不起作用。我决定更改javascript。注意：我的示例在保持架内切换src和dest的显示，使保持架与dest的大小相同，因此边框显示在dest和src的外部

jQuery(function($){ 
    // Common items, to deal with 
    var src = $(".src"); 
    var dest = $(".dest");
    var holder=$(".holder");
    holder.width(dest.width()); 
    holder.height(dest.height());
    // Setup 
    src.hide(); 
    // Interaction 
    dest.click(function(){ 
        src.show();
        src.css("position", "absolute"); 
        src.width(dest.width()); 
        src.height(dest.height()); 
        src.offset(dest.offset()); 
        dest.hide();
     }); 
    src.click(function(){ 
        dest.show();
        src.hide(); 
    }); 

});

EDIT2：如果希望src.click（）事件在src click时不返回dest，请删除它。

请参阅我已尝试过，您建议过，但这不起作用。请参阅我问题的“更新2”。你能让“更新2”工作吗？这并不像我想的那么简单。。。