Question

因此，我正在开发一个网站，用户可以将其背景图片更改为所需的任何内容（只有URL和网络上的内容），我为他们提供了一些我自己的选择，可以工作，但是出于某种原因，该变量是不起作用。

我尝试过

'url(db)';
'url(+db+)';
'url("db")';

<button class="bp" onclick="myown()">My Own background</button>

function myown() {
  var db = window.prompt("Image URL");
  document.body.style.backgroundImage = 'url(db)';
}

Answer 1

JS基础知识以及连接字符串和变量。变量必须用引号引起来，否则它只是一个字符串，而不是变量。

document.body.style.backgroundImage = 'url(' + db + ')';

Answer 2

您需要像这样连接变量

function myown() {
  var db = window.prompt("Image URL");
  document.body.style.backgroundImage = "url("+db+")";
}

<button class="bp" onclick="myown()">My Own background</button>

添加此示例网址以提示进行测试

https://cdn.pixabay.com/photo/2015/03/30/20/33/heart-700141_960_720.jpg

您也可以使用模板文字

function myown() {
  var db = window.prompt("Image URL");
  let dummyUrl = 'https://cdn.pixabay.com/photo/2015/03/30/20/33/heart-700141_960_720.jpg'
  let url = `url(${dummyUrl})`
  document.body.style.backgroundImage = url
}

<button class="bp" onclick="myown()">My Own background</button>

如何修复自定义可变背景图片更改

2 个答案: