javascript - 从 json 中获取容器尺寸并在 css 样式标签中显示值

Question

背景:

在我将容器尺寸保存在 <style> 之前标签如下:

.container {
width: 600px;
height: 600px;
}

现在我需要从 json 文件下面获取容器的宽度和高度，我需要在 class .container 中显示这些值

{
  "path" : " shape\/",
  "info" : {
    "author" : ""   
  },
  "name" : "shape",
  "layers" : [
    {     
      "height" : 600,
      "layers" : [
        {         
          "name" : "bg_rectangle_1"
        },
        {         
          "height" : 475,
          "layers" : [
            {

              "src" : "http://sitename.com/images/oneheart.png",             
              "name" : "mask_image_1"
            },
            {              
              "name" : "useradd_ellipse1"
            }
          ],          
          "name" : "user_image_1"
        }
      ],      
      "width" : 600
    }
  ]
}

这里是 Full script & json file

如果 Css 在 Javascript 文件中，那么我可以通过在 img.css 中使用以下代码来获取尺寸。 , 但是如何在样式标签 css 的 css 类中显示这些高度和宽度呢？

$(document).ready(function() {

var maskedImageUrla = "";
var coordinates = { x: 0, y: 0 };

$.getJSON('test.json', function(json) {
    for (let layer of json.layers) {
        if (layer.layers && layer.layers.length > 0) {
            for (let temp of layer.layers) {
                if (temp.src) maskedImageUrla = temp.src;
                else if (temp.layers) {
                    for (let tl of temp.layers)
                        if (tl.src) {
                            maskedImageUrla = 'http:///sitename.com/test/images/' + tl.src;
                            coordinates.x = temp.x;
                            coordinates.y = temp.y;
                        }
                }
            }
        }
    }
        var mask1 = $(".container").mask({
            maskImageUrl: maskedImageUrla,
            onMaskImageCreate: function(img) {

                img.css({
                    "position": "fixed",
                    "left": coordinates.x + "px",
                    "top": coordinates.y + "px" 
                });
            }
        });

Answer 1

请用相同的 getJSON 替换您的代码

$.getJSON('test.json', function(json) { 
   for (let layer of json.layers) { 
      width = layer.width; 
      height = layer.height; 
      if (layer.layers && layer.layers.length > 0) { 
         for (let temp of layer.layers) { 
           if (temp.src) maskedImageUrla = temp.src; 
           else if (temp.layers) { 
                for (let tl of temp.layers) 
                    if (tl.src) { 
                        maskedImageUrla = '139.59.24.243/ecom1/site/test/…' + tl.src; 
                        coordinates.x = temp.x; 
                        coordinates.y = temp.y; 
                    } 
                } 
           } 
     } 
}
$(".container").css('width',width+"px").css('height',height+"px").css('background',"red");