请问如何使innerHtml后的元素适应其原来元素的样式?

心悦琴
  • 67

image.png

如图,我想实现的效果是将那些便签的位置设置在设置在中央,装填在类似上面红色背景的content样式的容器内,但是不知如何修改
image.png
以上是主要js代码,用for循环把每个便签的内容取出来呈现

以下是完整代码,请赐教,不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>祝福墙</title>
</head>
<style>
    * {
        padding: 0;
        margin:0;
    }
    body {
       
        background-repeat: no-repeat;   
        /* background-size: 100% 100%;   */
        background:url("./墙.jpg");
    }
    div.content {
        /* 凝胶布局 */
        width: 800px;
        margin:0 auto;
        background-color: red;
    }

    .wishingWall {
        position: absolute;
       
        /* padding: 100vw; */
        background: url("./纸1.jpeg") no-repeat;
        background-size:100% 100%;
        width: 200px;
        height:220px;
        

    }

    .tip2 {

    }

    span {
        display: block;
    }

    .tip1 {
        position: relative;
        height: 25px;
        padding-top: 43px;
        /*background: url("./纸2.jpeg");*/
    }

    .tip1 span {
        padding-left: 10px;
    }

    .tip1 s {
        text-decoration: none;
        position: absolute;
        top: 45px;
        right: 10px;
        /*width: 15px;*/
        /*height: 15px;*/
        text-align: center;
        font: 600 12px/15px "simsun";
        cursor: pointer;
    }

    .tip2 {
        /*background: url("./纸2.jpeg") no-repeat;*/

        /*max-height: 100px;*/
        overflow: hidden;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 20px;
    }

    .tip3 {
        /*height: 53px;*/
        padding-top: 20px;
        /*background: url("./纸2.jpeg") no-repeat;*/


    }

    .tip3 .icon {
        padding-left: 10px;
    }

    .tip3 span {
        display: inline-block;
        float: right;
        font-size: 14px;
        margin-top: 5px;
        margin-right: 16px;
        color: #C0F;
    }

  
</style>
<body>
    <div class="content">
       content

    </div>

    <!-- <div class="11">
        fwadqwdqwdwqdqwdqwdqwdqwdqwdqwdq
    </div> -->
<script>
    //模拟数据库,获取信息
    var messages = [
        {"id": 1, "name": "mahu", "content": "今天你拿苹果支付了么", "time": "2016-02-17 00:00:00"},
        {"id": 2, "name": "haha", "content": "今天天气不错,风和日丽的", "time": "2016-02-18 12:40:00"},
        {"id": 3, "name": "jjjj", "content": "常要说的事儿是乐生于苦", "time": "2016-03-18 12:40:00"},
        {"id": 4, "name": "9.8的妹纸", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2016-03-18 12:40:00"},
        {"id": 5, "name": "雷锋ii.", "content": "元宵节快乐", "time": "2016-02-22 12:40:00"},
        {"id": 6, "name": "哎呦哥哥.", "content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人,真是躲得过初一,躲不过十五。", "time": "2016-02-22 01:30:00"},
        // {
        //     "id": 7,
        //     "name": "没猴哥,不春晚",
        //     "content": "班主任:“小明,你都十二岁了,还是三年级,不觉得羞愧吗”?。小明:“一点也不觉得,老师你都四十多岁了,不也是年年在三年级混日子吗?羞愧的应该是你”。老师:……",
        //     "time": "2016-02-22 01:30:00"
        // },
        // {"id": 8, "name": "哎呦杰杰.", "content": "真搞不懂你们地球人,月亮有什么好看的,全是坑,还是对面那哥们好看,", "time": "2016-02-22 01:30:00"},
        // {"id": 9, "name": "哎呦哎呦", "content": "今天哪里的烟花最好看!!?答:朋友圈。。。", "time": "2016-02-22 02:30:00"}
    ];
    var content = document.getElementsByClassName("content")[0];

    for (var i = 0; i < messages.length; i++) {
       
        content.innerHTML+= 
       

         '<div class="wishingWall">' 
        +
            '<div class="tip1">' +
            '<span>' + messages[i].time + '</span>' +
            '<s><img src="关闭32.svg" alt="关闭" width="24vw" height="24vw"></s>' +
            '</div>' +
            '<span class="tip2">' + messages[i].content + '</span>' +
            '<span class="tip3">' +
            '<span>' + messages[i].name + '</span>' +
            '</span>' +
            '</div>';
    }
    var divEles = content.children;
    var zIndexValue = 0;
    for (var i = 0; i < divEles.length; i++) {
        divEles[i].style.top = randomTop() + "px";
        divEles[i].style.left = randomLeft() + "px";
        divEles[i].onclick = function () {
            zIndexValue++;
            this.style.zIndex = zIndexValue;
        }
        var closeEle = divEles[i].getElementsByTagName("s")[0];
        closeEle.onclick = function () {
            content.removeChild(this.parentNode.parentNode);
        }
    }

    function randomTop() {
        return parseInt(Math.random() * (627 - 257));
    }

    function randomLeft() {
        return parseInt(Math.random() * (960 - 231));
    }
</script>
</body>
</html>
回复
阅读 323
1 个回答
✓ 已被采纳

子元素都是绝对定位的,撑不起来父元素
可以给父元素一个固定高度来实现

 div.content {
      /* 凝胶布局 */
      width: 800px;
      height: 800px;
      position: relative; // 加上这个,让子元素根据父元素定位
      margin: 0 auto;
      background-color: red;
    }
// 改变数值防止超出
      function randomTop() {
        return parseInt(Math.random() * (800 - 200))
      }

      function randomLeft() {
        return parseInt(Math.random() * (800 - 200))
      }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏