如何用jQuery实现点击图片动态修改指定div的background-image属性

DevOps 小满

2026-9-24

问题原因

你之前的代码问题并非出在src属性获取环节，而是background-image CSS属性要求属性值必须使用url(资源路径)的格式，你直接将拿到的图片路径字符串赋值，不符合CSS语法规范，因此无法生效。你测试设置none可正常生效，是因为none本身就是background-image的合法枚举属性值，不需要url()包裹，也说明你的DOM选择、事件绑定逻辑都是正常的。

正确实现代码

jQuery('.change-img').on('click', function() {
    var imgSrc = jQuery(this).attr('src');
    // 拼接为符合background-image要求的格式
    jQuery('.change-me').css('background-image', 'url("' + imgSrc + '")');
});

如果你的运行环境支持ES6模板字符串，也可以写成更简洁的格式：

jQuery('.change-img').on('click', function() {
    const imgSrc = jQuery(this).attr('src');
    jQuery('.change-me').css('background-image', `url("${imgSrc}")`);
});

补充优化建议

若.change-img类的图片是页面初始加载完成后动态渲染生成的，直接绑定事件会失效，可改用事件委托写法，绑定到页面初始加载时就存在的父元素上，性能更优：

// 可将document替换为包裹.change-img的、初始加载就存在的最近父元素
jQuery(document).on('click', '.change-img', function() {
    const imgSrc = jQuery(this).attr('src');
    jQuery('.change-me').css('background-image', `url("${imgSrc}")`);
});