将 CSS 属性应用于具有 JS 中变量的图像

Applying CSS properties to an image with variables in JS

本文关键字：变量 图像 JS CSS 属性 应用于      更新时间：2023-09-26

我正在尝试将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>

问题是你创建了一个 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() .

变量中没有<img>;你有图像的HTML代码。您可以像这样执行您正在尝试执行的操作：

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

.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"
});

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

在这里，您将 CSS 添加到$('.content li')

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

相关文章：