时间戳

首页 > 解决方案 > 在 CSS 或 Javascript 中为选定元素下的所有元素添加“顶部属性”到现有顶部的有效方法是什么？

javascript - 在 CSS 或 Javascript 中为选定元素下的所有元素添加“顶部属性”到现有顶部的有效方法是什么？

问题描述

我有一个装满绝对定位的 div 的容器。我想以恒定的顶部值 40px 显示一组绝对定位的 div 一个在另一个下方。因此，当我从 JSON 创建 div 时，我会为所有元素增加最高值。

    let topVal = 0

    function fetchItem(data) {
        title = data.title;
        el = document.createElement("div");
        el.className = "row";
        el.innerHTML = `${title}`;
        el.style.top = topVal + "px";
        topVal += 40;
        container.appendChild(el);
    }

现在的问题是，当我选择任何行时，我应该在所选行下创建一个新的子元素，并且我必须调整其下方所有元素的顶部。所以我将顶部添加到下面的所有元素中

container.addEventListener('click', function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;
    target.setAttribute("class", "row active");
    let newEl = document.createElement("div");
    newEl.className = "expand-box";
    target.appendChild(newEl);
    appendTopToNextSiblings()
}, false);

function appendTopToNextSiblings() {
    var list;
    list = document.querySelectorAll(".row.active ~ div");
    for (var i = 0; i < list.length; ++i) {
        let temp = parseInt(list[i].style.top) + 50 + "px";
        list[i].style.top = temp;

    }
}

我现在只需单击 1 次即可处理此问题。

我无法修改这些 div 的绝对位置。有没有更好的方法来为所有这些元素添加顶部或任何其他更好的方法来处理这种情况？我想在纯 javascript 或 CSS 中实现这一点。

任何建议，将不胜感激！

我在这里附上了小提琴链接https://jsfiddle.net/ytebvazj/2/

标签： javascripthtmlcss

解决方案

试试 margin-top:10px

.expand-box {
height: 50px;
margin-top: 10px;
background: paleturquoise;
width: 80%;
border: 1px solid grey;
border-radius: 5px;
position: absolute;
display: flex;
justify-content: center;}

推荐阅读