如何为jQuery创建的图片元素添加width:160、height:80的CSS样式？

别着急，我来帮你梳理下问题所在，再给你几个靠谱的实现方式！

你遇到的问题大概率是这两种情况：要么是选择器选错了，把样式不小心加到外层div上了；要么是创建元素/设置样式的语法出错，导致代码报错。下面给你几种正确的写法：

方法1：创建img元素时直接定义样式 #

这种方式最简洁，创建元素的同时就能把宽高样式加上：

// 创建带样式的img元素
const $newImg = $('<img>', {
  src: '这里填你的图片URL',
  css: {
    width: '160px',
    height: '80px'
  }
});

// 把图片添加到目标外层div里
$('.your-div-class').append($newImg); // 替换成你的div选择器，比如#your-div-id

方法2：先创建元素，再单独设置样式 #

如果习惯分步操作，也可以先创建img，再用jQuery的.css()方法给它加样式：

// 先创建img元素
const $newImg = $('<img src="你的图片URL">');

// 给图片设置宽高（数字会自动转为px，也可以写字符串'160px'）
$newImg.css({
  width: 160,
  height: 80
});

// 插入到外层div
$('#your-div-id').append($newImg);

避坑提醒 #

• 别把样式加到外层div上！比如如果你写了$('div').css(...)，那所有div都会被设置样式，而不是你刚创建的图片。一定要确保你操作的是img元素，而不是外层容器。
• 检查语法错误：比如创建元素时有没有漏写引号、括号，或者.css()方法里的对象格式是否正确（键值对要用逗号分隔，最后一个键值对不要加逗号）。

内容的提问来源于stack exchange，提问作者David Brierton