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的css属性（具有id“pastePhotos”），这是 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;
}

Answer 2

您可以使用jquery直接添加css属性

与$('#pastePhotos').css (propertyName, value )

一样

http://api.jquery.com/css/#css2

或者如果您将属性作为样式类，则还可以使用jquery添加此类

$('#pastePhotos').addClass( "myStyle" );

Answer 3

在complete: function(){}中添加$.ajax({})块。然后在$('#pastePhotos').css("display", 'inline-table')块中使用javascript添加css，依此类推。

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

3 个答案: