Fatal编程技术网
  • javascript/
  • Javascript 向动态创建的div添加增量相对位置

Javascript 向动态创建的div添加增量相对位置

javascript

Javascript 向动态创建的div添加增量相对位置,javascript,Javascript,我正在尝试使用动态创建的div创建此形状。我已经有了这个代码： var bgImg = ['ScreenShot.png', 'stars.jpg', 'ScreenShot.png', 'stars_1230_600x450.jpg']; for (var i = 0, n = 12; i < n; i++) { var port = document.createElement('div'); document.body.appendChild(port); por

我正在尝试使用动态创建的div创建此形状。我已经有了这个代码：

var bgImg = ['ScreenShot.png', 'stars.jpg', 'ScreenShot.png', 'stars_1230_600x450.jpg'];

for (var i = 0, n = 12; i < n; i++) {
    var port = document.createElement('div');
    document.body.appendChild(port);

port.style.backgroundImage = "url('" + bgImg[3] + "')";
我想我必须创建三个div/脚本，每行一个，这样才能使div正确对齐。主css将设置具有负边距顶部的div，以便它们可以正确级联

作为参考，我的css如下所示：

     div {
        height: 190px;
        width:230px;
        background: red;
        position: relative;
        background: #ef4c4d;
        background-position: center;
        float: left;
        margin: 8px;
        top: 30px;
        left: 10px;
    }

    div:before {
        content: '';
        position: absolute;
        bottom: 0; right: 0;
        border-bottom: 60px solid #0d1036;
        border-left: 60px solid transparent;
        width: 0;
    }
    div:after {
        content: '';
        position: absolute;
        top: 0; left: 0;
        border-top: 60px solid #0d1036;
        border-right:60px solid transparent;
        width: 0;
    }

for (var i = 0, n = 12; i < n; i++) {
    var port = document.createElement('div');
    port.style.backgroundImage = "url('" + bgImg[3] + "')";
    document.body.appendChild(port);
}
我想我需要从数组中提取整数，但确实不确定。

我在代码中注意到一些事情：

for (var i = 0, n = 12; i < n; i++) {
    var port = document.createElement('div');
    document.body.appendChild(port);
// <- end "}" of for loop is missing here

port.style.backgroundImage = "url('" + bgImg[3] + "')"; // <- will just be applied on the last created div
我猜你想要这样的东西：

     div {
        height: 190px;
        width:230px;
        background: red;
        position: relative;
        background: #ef4c4d;
        background-position: center;
        float: left;
        margin: 8px;
        top: 30px;
        left: 10px;
    }

    div:before {
        content: '';
        position: absolute;
        bottom: 0; right: 0;
        border-bottom: 60px solid #0d1036;
        border-left: 60px solid transparent;
        width: 0;
    }
    div:after {
        content: '';
        position: absolute;
        top: 0; left: 0;
        border-top: 60px solid #0d1036;
        border-right:60px solid transparent;
        width: 0;
    }

for (var i = 0, n = 12; i < n; i++) {
    var port = document.createElement('div');
    port.style.backgroundImage = "url('" + bgImg[3] + "')";
    document.body.appendChild(port);
}
要更新top属性，可以将此代码用于：

谢谢你的帮助！你提供的代码不太管用，但我修改了它和魔术！对于var i=0，n=4；i