javascript - 如何设置动态数据的css属性

Question

我正在使用 javascript 在 div 标记中编写一些内容。通过ajax接收数据。 这是脚本

 $.ajax({
            url :' the url',
            data : {
                productValue: selectedText,
                giveMyId : saveMyName
            },
            type: 'POST',
            dataType: 'json',
            success: function(data)
            {
                var imageHTML='';
                var dataLength=data.length;
                photosHasPath=data[0];
                if(dataLength > 1)
                {
                for(var i=1;i<dataLength;i++)
                {
                    allProductNames.push(data[i]);
                   imageHTML += '<img src="' + photosHasPath + data[i] + '" height="100" width="100" style="padding: 0.5em;">' + 
                          ' <input type=\"button\" class=\"deletePhoto\" value=\"Delete\" name=\"'+data[i]+'\">';
                }
                $('#pastePhotos').html(imageHTML);
            }
            else
            {
              $('#pastePhotos').html('<i>No photos left.</i>');  
            }

            }
        });

现在我正在尝试设置此 div(具有 id 'pastePhotos')的 css 属性，即 display:inline-table。但它不起作用。它在一行中像文本一样显示图像和删除按钮。

问题:-
那么我该如何设置它的 css 属性呢？

注意:-
我已经尝试过以下操作
1.

 imageHTML += '<img src="' + photosHasPath + data[i] + '" height="100" width="100" style="padding: 0.5em; display: inline-table;">' + 

' <input type=\"button\" class=\"deletePhoto\" value=\"Delete\" name=\"'+data[i]+'\">';

2。 '<div style="display: inline-table;">' + imageHtml + '</div>'

3。 <div id="pastePhotos" style="display: inline-table;">

Answer 1

无需将样式内联到 Javascript 代码中。由于您已经提供了一个 id，您可以简单地在 CSS 文件或 style 元素中添加样式

#pastePhotos {
    display: inline-table;
}

但是，主要问题似乎是缺少 img 和 input 元素的样式。为此，您必须添加一个

#pastePhotos img, #pastePhotos input {
    display: table-cell;
}

并将它们包装在一个额外的 div 中用于 table-row

imageHTML += '<div class="img-row"><img src="' + photosHasPath + data[i] + '" height="100" width="100" style="padding: 0.5em;">' + 
          ' <input type=\"button\" class=\"deletePhoto\" value=\"Delete\" name=\"'+data[i]+'\"></div>';

#pastePhotos .img-row {
    display: table-row;
}