Question

我有两个相同大小的div，当我点击其中一个div上的按钮时，它会变大。我想将较小的div移动到较大div的右下角，当我再次单击该按钮时，div将返回其原始大小和位置。

在：

 ---   ---
| 1 | | 2 |
 ---   ---

后：

    ---------
   |    2    |
   |      ---|
   |     | 1 |
    ---------

这是我到目前为止调整大小的javascript：

function resizeSubscriber() {
var subscriberPanel = document.getElementById('dvOtherPerson');
var publisherPanel = document.getElementById('dvYou');
var classSetting = subscriberPanel.getAttribute('class');
if (classSetting == 'col-xl-4') {
    subscriberPanel.setAttribute('class', 'col-xl-12');
}
else {
    subscriberPanel.setAttribute('class', 'col-xl-4');
}
}

这是我的asp代码

    <div id="dvOtherPerson" class="col-xl-4">
        <div>
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Rachel Hawkins
                        </h3>
                    </div>
                </div>
                <div class="m-portlet__head-tools">
                    <ul class="m-portlet__nav">
                        <li class="m-portlet__nav-item">
                            <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                <i class="fa fa-volume-up text-success"></i>
                            </a>&nbsp;&nbsp;
                            <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                <i class="fa fa-refresh"></i>
                            </a>&nbsp;&nbsp;
                            <a onclick="resizeSubscriber();" href="#" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                <i class="fa fa-expand"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="m-portlet__body">
                <img src="./img/temp/users/video_rachel.jpg" class="img-fluid" />
            </div>
        </div>
<%--        <div id="videos">
            <div id="subscriber"></div>
        </div>--%>
    </div>
            <div id="dvYou" class="col-xl-4">
                <div class="m-portlet m-portlet--fit">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Me
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <ul class="m-portlet__nav">
                                <li class="m-portlet__nav-item">
                                    <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                        <i class="fa fa-microphone-slash text-danger"></i>
                                    </a>&nbsp;&nbsp;
                                    <a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
                                        <i class="fa fa-refresh"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div id="publisher"></div>
                    </div>
                </div>
            </div>

Answer 1

使用appendChild，它会将源元素移动到目标元素，例如

target_element.appendChild(source_element)

如评论所述，要应用不同的CSS样式，请执行此操作，source_element

时，target_element会自动更改

source_element {...}

target_element source_element {...}

Answer 2

如果你可以使用jQuery，你可以使用方法append（）：

$(<OUTER_SELECTOR>).append($(<INNER_SELECTOR>));

如何使用javascript将div移动到另一个div？

2 个答案: