Question

我正在尝试将css属性添加到设置为变量的图像中：

<script>
var img = '<img src="../common/img/check-mark.png">';
var imgCheck = img.css({'border':'1px solid red'});
$(function(){
    $('.content li').before(imgCheck);
});
</script>

图像显示没有css属性：

<script>
var img = '<img src="../common/img/check-mark.png">';
$(function(){
    $('.content li').before(img);
});
</script>

如果我在.before之后添加css属性，它会将css应用于整个li。

<script>
var img = '<img src="../common/img/check-mark.png">';
$(function(){
    $('.content li').before(img).css({'border':'1px solid red'});
});
</script>

Answer 1

问题是你创建了一个HTML字符串，而不是一个包含<img>元素的jQuery对象：

var img = '<img src="../common/img/check-mark.png">';

然后尝试在该字符串上使用CSS方法，这不起作用，因为字符串没有css()方法;相反，您首先需要创建一个jQuery对象（使用该HTML字符串）：

$(img).css({'border' : '1px solid red'});

var img = '<img src="http://placekitten.com/g/250/250/" />';

$(img).css({'border' : '1px solid red'}).appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

参考文献：

css()。

Answer 2

.before()返回正在操作的元素，而不是您插入的元素。

像这样颠倒操作：

$(img).insertBefore('.content li').css({'border':'1px solid red'});

或者像这样创建：

$("<img>", {
    src: "../common/img/check-mark.png",
    css: {border:'1px solid red'},
    insertBefore: ".content li"
});

Answer 3

你在变量中没有<img>;你有一个图像的HTML代码。你可以做你想做的事情：

var img = $("<img/>", {
  src: "../common/img/check-mark.png",
  css: { border: "1px solid red" }
});

Answer 4

$('.content li').before(img).css({'border':'1px solid red'});

您要将CSS添加到$('.content li')

将其添加到img句柄：$(img).css({'border':'1px solid red'});

将CSS属性应用于JS中包含变量的图像

4 个答案: