如何在不删除继承的css属性的情况下删除父div?

时间:2011-11-21 21:16:02

标签: javascript jquery css

这就是我想要做的,

<div id="table">
<div id="user"></div>
<div id="user1"></div>
</div>

当我点击一个按钮时,会发生这种情况

$("#body").append("<div id=\"user-wrap\"></div>");
$('#user').appendTo($('#user-wrap'));
$('#user1').appendTo($('#user-wrap'));
$('#user-wrap').appendTo($('#table'));

然后我在用户包装上应用moz-transform。在我应用另一个转换之前,我必须删除此userwrap div。当我再次将用户换行的子项附加到body并删除用户换行时。我的变换不会被保留。我通过将值存储在单独的变量中并在删除后再次应用它来解决了这个问题。但问题是,当我用两个div实际看起来更接近时,用user-wrap应用了scale变换。现在,因为我删除了用户包装,所以即使我再次应用了变换,各个用户div也是分开的。孩子之间的距离很远。我怎么解决这个问题?

我正在重新描述整个事物,我想将变换应用于div中的一组子项,然后删除div而保留子项之间的缩放/旋转和间距值?

我知道这是一个复杂的问题,我们将不胜感激。我希望所有的javascript武士和CSS忍者可以帮助我在这里;)

2 个答案:

答案 0 :(得分:1)

你不能这样做,如果可以的话,你不应该这样做。

但如果你真的知道你在做什么,你可以试试这个:

jQuery CSS plugin that returns computed style of element to pseudo clone that element?

您必须确保所有Mozilla特定属性都在该函数的数组中。

答案 1 :(得分:0)

不顾一切:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>

    function screwItUp() {
        //EDIT: or if ($('#table div:first-child').attr('id') == 'user')
        if ($('#table div:first-child').html() == 'USER') {
            $('body').append('<div id=\'userWrap\'>USER-WRAP</div>');
            $('#user').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
            $('#user1').css('font-size',Math.floor(Math.random()*42)+'px').appendTo($('#userWrap'));
            $('#userWrap').appendTo($('#table'));
        } else { 
            $('#user').appendTo($('#table'));
            $('#user1').appendTo($('#table'));
            $('#userWrap').remove();
        }
    }

</script>

</head>

<body>
<div id="table">
    TABLE
    <div id="user">USER</div>
    <div id="user1">USER1</div>
</div>
<button onClick='screwItUp(); ' >TOGGLE</button>
</body>
</html>

示例:http://zequinha-bsb.int-domains.com/togglewrap.html