来自 JSON 的 CSS 属性值答案

【问题标题】：CSS property value from JSON来自 JSON 的 CSS 属性值
【发布时间】：2021-12-22 05:07:35
【问题描述】：

我是 html/css/javascript 世界的新手，我正在尝试做某事，但不知道怎么做。我有一个简单的背景图像，上面有一些标记按钮，这些标记在 CSS 中都有自己的类，我为它们分配了一个顶部和左侧值以将它们定位在图像上方。下一步是从 JSON 文件中读取这些值，而不是我直接用 CSS 编写它们，但我不知道该怎么做。

我的 JSON 文件如下所示：

[{ "name" : "marker1", "top" : "150px", "left" : "50px" }, {"name" : "marker2", "top" : "200px", "left" : "100px" }]

虽然我的按钮看起来像这样：

<button class="marker1" onclick="togglePopup('box1')"><ion-icon size="large" name="add-circle-outline"></ion-icon></button>

【问题讨论】：

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。

标签： html css json

【解决方案1】：

欢迎使用 StackOverflow！

对于您提出的问题，这是一个简单的解决方案。我不知道你是否使用 JavaScript 框架。如果这样做，请考虑重构创建按钮的代码。如果没有，此解决方案仍将向您展示如何实现所需的行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        .marker {
            position: absolute;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        const json = JSON.parse(`{
            "markers": [
                { "name": "marker1", "top": "150px", "left": "50px" },
                { "name": "marker2", "top": "200px", "left": "100px" }
            ]
        }`);

        for (const marker of json.markers) {
            const button = document.createElement("button");

            // styling
            const sides = ["top", "right", "bottom", "left"];
            sides.forEach(side => {
                if (marker.hasOwnProperty(side)) {
                    button.style[side] = marker[side];
                }
            });

            // class
            button.classList.add("marker");
            button.classList.add(marker.name);

            // icon
            const icon = document.createElement("ion-icon");
            icon.setAttribute("size", "large");
            icon.setAttribute("name", "add-circle-outline");

            button.appendChild(icon);
            document.body.appendChild(button);
        }
    </script>
</body>
</html>

【讨论】：