Question

我使用jquery通过递归函数动态地创建了包含无序列表，列表项和属性的html结构。然后我在属性标签内添加了一个图像。现在我想在css文件中设置该图像的样式。属性标记还包含我的json中的名称值。我在上下文菜单中显示所有这些。我打算在名字的左侧显示图像。目前我添加的图像出现在名称的中心和右侧，图像的大小也太大了。我想调整图像的位置和大小。在这种情况下，当我动态添加图像时，我该怎么做？这是制作html结构的函数：

var getMenuItem = function (itemData) {
        var item = $("<li>")
            .append(
        $("<a>", {
            title : itemData.name,
            html : itemData.name
        }).append($("<img>", {"src": "Boma_1_2/Boma.png"})));
        if (itemData.children) {
            var subList = $("<ul>");
            $.each(itemData.children, function () {
                subList.append(getMenuItem(this));
            });
            item.append(subList);
        }
        return item;
    };

Answer 1

通过'<img class="my-image" src="'+src+'"/>'向它添加一个类，它会在CSS中找到相应的规则并应用它们，或者你也可以通过jQuery添加它：

var $img = $("<img>", {"src": "Boma_1_2/Boma.png"})
$img.css({width:'40px'})
$link.append($img)

第一个更干净。

Answer 2

我想调整图像的位置和大小。在这种情况下，当我动态添加图像时，我该怎么做？

使用您的位置和尺寸定义在文件中添加CSS规则。假设您的班级名称为imgStyle。只需在创建过程中将此类添加到您的图片代码中，如下所示。

$("<img>", {"src": "Boma_1_2/Boma.png","class": "imgStyle"})

如何设置使用jquery动态添加的图像的样式？

2 个答案: