在没有jQuery的情况下将背景图像更改为数据URI

Question

我有数据uri编码的背景图片，可在CSS中使用

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= ...

Answer 1

您可以使用template literal来解决报价问题。

document.querySelector('div').style.backgroundImage = `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")`

div{width:100px;height:100px;}

<div></div>

---

也可以转义引号。 （我只是将"替换为\"）

document.querySelector('div').style.backgroundImage = "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\")"

div{width:100px;height:100px;}

<div></div>

Answer 2

您可以分配它以将base64图像转换为css类，并分配给document.getElement并添加css类。

function setImage() {
  element = document.getElementById('app')
  element.className += " image";

}

.image {
  width: 100px;
  height: 100px;
  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");
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button onclick="setImage()">set image</button>
  <div id="app">

  </div>
</body>

</html>

Answer 3

我希望您使用标识符来获取要分配背景图像的特定元素，如果您要使用一个类，请获取该类的元素列表-检查您是否至少有一个元素，请获取该元素并通过Javascript分配背景图片-还只是注意到您的base64似乎没有正确编码的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 + "')";
}