Javascript 不使用jQuery将背景图像更改为数据URI

我有在CSS中工作的数据uri编码背景图像：

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='95' height='6' viewBox='0 0 95 6'%3E%3Ctitle%3Escale mod%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='buttonbase'%3E%3Cg id='scale_mod' data-name='scale mod'%3E%3Cpath d='M95,6H0V5H95Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M94.953,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M86.4,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M77.853,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M69.3,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M60.753,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M52.2,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M43.653,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M35.1,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M26.553,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M18,5h-.9V3H18Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M9.452,5h-.9V3h.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M.9,5H0V3H.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M89.11,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M80.56,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M72.01,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M63.46,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M54.91,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M46.36,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M37.81,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M29.26,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M20.71,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M12.16,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3Cpath d='M3.61,0h.9V5h-.9Z' style='fill:%23c8c8c8'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

有没有一种方法可以使用querySelector动态分配它

document.querySelector('.element').style.backgroundImage= ...

---

您可以指定它将base64图像转换为css类，并使用document.getElement指定并添加css类

函数setImage（）{
element=document.getElementById（'app'）
element.className+=“image”；
}

.image{
宽度：100px；
高度：100px；
背景图片：url("数据：image/svg+xml，%3Csvg xmlns='1http://www.w3.org/2000/svg“width='95'height='6'viewBox='0 95 6'%3E%3Ctitle%3Escale mod%3C/title%3E%3Cg id='Layer\u 2'数据名='Layer 2'%3E%3Cg id='buttonbase'%3E%3Cg id='scale\u mod'数据名='scale mod'%3E%3E%3C路径d='M95,6H0V5H95Z'样式='fill:%23c8c8c8'/%3E%3C路径d='M94.953,5h-.9V3h.9h='fill:%23c8c8'/%3E%3E%3E%3C路径d='M77.853,5h-%3E%3E%3E%3E%3E%3C路径d='M77.853.5h-.5h-.9V3h.3V3H.3.3%3.3%3路径d.3%3%3%3路径d.3路径d='3.3.3.3路径d class='3.3.3.3%3%3%3%3路径d路径d路径d='3.3.3.3.3%3%3%3%3%3%3%3%3%3路径d路径d路径d路径d路径d途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途d='M7 7 7 7 7 7.3.3.7 7 7 7 7 7 7.3.3.3.8 8 8 8 8 8 8.3.3.3.3/%3E%3Cpath d='M43.653,5h-.9V3h.9Z'style='fill:%23c8c8c8'/%3E%3C3.3%E%3%3%3路径d路径d='M26.556.553,5h-.9V3h-.9V3h-.9V3h.9Z’风格class class='学校学校class='学校class='学校class='学校class='学校class='学校class='学校class='学校class='学校class='学校class='学校class='填充：%23C8C8C8C8C8C8C8C8C8C8C8C8'/%3E%3E%3%3%3路径d路径d路径d.3路径d路径d='3路径d class='5.5.5.5.5.3路径d class class='M26.5.5.5.5.5.3路径d class='5.5.5.5.5.553.5.5.553.5,3.5.5.5.5,3.5-----.5h-.5h-.5h-.9V3V3V33.11,0h.9V5h-.9Z'style='fill:%23c8c8c8'/%3E%3Cpath d='M80.56，9V5h.9V5h-.9Z”风格风格class='学校学校学校学校学校学校学校学校学校。9V5h.9V5h-.9Z”风格class='学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校0h.9V5h-.9Z'style='fill:%23c8c8c8'/%3E%3Cpath d='M29.26,0h.9V5h-.9Z'style='fill:%23c8c8c8'/%3E%3Cpath d='M20.71,0h.9V5h-.9Z'style='fill:%23c8c8c8'/%3E%3Cpath d='M12.16,0h.9V5h-.9Z'style='fill:%23C8C8C8C8'/%3E%3Cpath d='M3.61,0h.9V5h-.9Z'style='fill:%23C8C8C8C8'/%3E%3C/g%3E%；
}

JS-Bin
设置图像

您可以使用来克服引号问题

document.querySelector（'div'）.style.backgroundImage=`url（'数据：image/svg+xml，%3Csvg xmlns='1http://www.w3.org/2000/svg“width='95'height='6'viewBox='0 95 6'%3E%3Ctitle%3Escale mod%3C/title%3E%3Cg id='Layer\u 2'数据名='Layer 2'%3E%3Cg id='buttonbase'%3E%3Cg id='scale\u mod'数据名='scale mod'%3E%3E%3C路径d='M95,6H0V5H95Z'样式='fill:%23c8c8c8'/%3E%3C路径d='M94.953,5h-.9V3h.9h='fill:%23c8c8'/%3E%3E%3E%3C路径d='M77.853,5h-%3E%3E%3E%3E%3E%3C路径d='M77.853.5h-.5h-.9V3h.3V3H.3.3%3.3%3路径d.3%3%3%3路径d.3路径d='3.3.3.3路径d class='3.3.3.3%3%3%3%3路径d路径d路径d='3.3.3.3.3%3%3%3%3%3%3%3%3%3路径d路径d路径d路径d路径d途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途途d='M7 7 7 7 7 7.3.3.7 7 7 7 7 7 7.3.3.3.8 8 8 8 8 8 8.3.3.3.3/%3E%3Cpath d='M43.653,5h-.9V3h.9Z'style='fill:%23c8c8c8'/%3E%3C3.3%E%3%3%3路径d路径d='M26.556.553,5h-.9V3h-.9V3h-.9V3h.9Z’风格class class='学校学校class='学校class='学校class='学校class='学校class='学校class='学校class='学校class='学校class='学校class='学校class='填充：%23C8C8C8C8C8C8C8C8C8C8C8C8'/%3E%3E%3%3%3路径d路径d路径d.3路径d路径d='3路径d class='5.5.5.5.5.3路径d class class='M26.5.5.5.5.5.3路径d class='5.5.5.5.5.553.5.5.553.5,3.5.5.5.5,3.5-----.5h-.5h-.5h-.9V3V3V33.11,0h.9V5h-.9Z'style='fill:%23c8c8c8'/%3E%3Cpath d='M80.56，9V5h.9V5h-.9Z”风格风格class='学校学校学校学校学校学校学校学校学校。9V5h.9V5h-.9Z”风格class='学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校学校0h.9V5h-.9Z'style='fill:%23c8c8c8'/%3E%3Cpath d='M29.26,0h.9V5h-.9Z'style='fill:%23c8c8c8'/%3E%3Cpath d='M20.71,0h.9V5h-.9Z'style='fill:%23c8c8c8'/%3E%3Cpath d='M12.16,0h.9V5h-.9Z'style='fill:%23C8C8C8C8'/%3E%3Cpath d='M3.61,0h.9V5h-.9Z'style='fill:%23C8C8C8C8'/%3E%3C/g%3E%3C/g%3E'/svg%3E'>
div{宽度：100px；高度：100px；}
我希望您使用一个标识符来获取要将背景图像分配给的特定元素，如果您想使用一个类，请获取该类的元素列表-检查是否至少有一个元素，获取该元素并通过Javascript分配背景图像-还注意到base64似乎不正确y编码的Base64数据：

var myElements = document.getElementsByClassName("element"); // or $(".element")
var myBase64Content = "data:image/svg+xml,..."; //Insert base 64 encoding here

// We have at least one element, take first and assign background image
if(myElements.length > 0) {
     myElements[0].style.backgroundImage = "url('" + myBase64Content + "')";
}

你不是在显示答案吗？我不认为url是base64格式的。可能是，但我在引号中丢失了。好的，我想我知道了，答案发布了。url仍然没有，我将删除相关文本。“模板文字”有效，但“Dreamweaver”抛出了一个错误-解析错误：意外字符”`“。我应该安全地忽略它吗？@Serg是的，我想你可以安全地忽略它。（如果您想更向后兼容，请使用转义引号
\'
，
\'“
也可以使用）@Serg添加了另一个示例。