渲染页面-解构

最新推荐文章于 2024-08-11 18:40:36 发布

九酱子

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量81

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_44729219/article/details/131125845

版权

该代码示例展示了如何使用JavaScript从一个对象数组中动态创建HTML结构，包含图片、文本和价格信息。CSS用于设置盒模型、布局和颜色，内容被插入到一个带有特定类名的div元素中，呈现为灵活的网格布局。

摘要由CSDN通过智能技术生成

html

<div class="box">
        <div class="content">
            <!-- <div class="box1"> -->
                    <!-- <div class="img">
                        <img src="../DOM/image/img14.jpg" alt="">
                    </div>
                    <span>文字</span>
                    <p>￥价格</p> -->
            <!-- </div> -->
        </div>
    </div>

<script>
        const content = document.querySelector('.content')
        let str = ''
        const obj = [
            {
                img1: "../DOM/image/img10.jpg",
                text: "这里是文字",
                price: 491
            },
            {
                img1: "../DOM/image/img11.jpg",
                text: "这里是文字",
                price: 492
            },
            {
                img1: "../DOM/image/img12.jpg",
                text: "这里是文字",
                price: 493
            },
            {
                img1: "../DOM/image/img13.jpg",
                text: "这里是文字",
                price: 494
            },
            {
                img1: "../DOM/image/img14.jpg",
                text: "这里是文字",
                price: 495
            },
            {
                img1: "../DOM/image/img11.jpg",
                text: "这里是文字",
                price: 496
            },
            {
                img1: "../DOM/image/img12.jpg",
                text: "这里是文字",
                price: 497
            },
            {
                img1: "../DOM/image/img13.jpg",
                text: "这里是文字",
                price: 498
            }
        ];
        obj.forEach(item => {
            const {img1,text,price} = item
            str += `
            <div class="box1">
                <div class="img">
                    <img src="${img1}" alt="">
                </div>
                <span>${text}</span>
                <p>￥${price}s</p>
            </div>
            `
        })
        content.innerHTML = str
    </script>

css

<style>
        * {
            box-sizing: border-box;
        }
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
        .content {
            width: 460px;
            height: 400px;
            border: 1px solid #008000;
            margin: 50px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        
        }
        .box1 {
            width: 100px;
            height: 150px;
            border: 1px solid blue;
            text-align: center;
        }
        .img,
        img {
            width: 100px;
            height: 100px;
        }
        p {
            margin-top: 0;
        }
    </style>