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

Question

我有在 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= ...

Answer 1

您可以分配它以将您的 base64 图像转换为 css class 并分配 document.getElement 并添加 css class.

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 2

您可以使用 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 3

如果您想使用 class 获取具有该 class 的元素列表，我希望您使用标识符来获取特定元素以分配背景图像 - 检查是否您至少有一个元素，获取该元素并通过 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 + "')";
}

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

Change background-image to data URI without jQuery

javascript

background-image

data-uri