如何使用jquery和javascript将html元素向左移动

How to shift html elements toward left using jquery and javascript

本文关键字：元素 左移 移动 html 何使用 jquery javascript      更新时间：2023-09-26

我的html中有一个按钮。通过点击它，我想在按钮之前插入一个绿色框（"div"）。jquery中有办法做到这一点吗？我在下面写了代码，但它不起作用。新元素出现在我的按钮上。

click: function () {
    var oldLeft = parseInt($('#addButton').css('left'));
    var newFU = $('<div class="fu"></div>');
    newFU.insertBefore("#addButton");
    var newLeft=  oldLeft + newFU.width();
    $("#addButton").css("left",  newLeft);
    $(this).dialog("close");
}

相关css如下：

div .fu {
    width: 50px;
    height: 50px;
    background-color: #19833F;
    position: absolute;
    color: white;
    text-align: center;
    vertical-align: middle;
}
.addButton{
    font-weight: bolder;
    background-color: white;
    color: #20ff5c;
    font-size: 18px;
    left: 20px;
}

我通过定义具有相对位置的按钮来解决问题：

addButton{
    font-weight: bolder;
    background-color: white;
    color: #20ff5c;
    font-size: 18px;
    left: 10px;
    position: relative;
}
相关文章：