JavaScript 从文本框文本更改背景图像

Question

我正在尝试从我的文本输入字段中获取文本并将其用作背景图像。显然它需要是一个有效的 URL。

到目前为止，这是我的代码...

CSS:

body {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.bgimg {
  background-image:url('http://192.168.0.4/DesktopVersion/Inc/Images/Background/DarkWood.jpg');
}

JavaScript:

$("#SetBG").click(function() {
  var URL = document.getElementById("ImageURL").text();
  $(".bgimg").css('background-image',"url(" +URL +")");
});

HTML:

<input type="text" id="ImageURL"></input>
<button id="SetBG">Set Background</button>

希望有人能帮我弄清楚为什么这不起作用。

Answer 1

输入 <input> 的值元素存储为其 value属性，而不是它包含的文本节点(这是 jQuery 的 .text() 函数返回的内容)。

试试这个:

$("#SetBG").click(function() {
    var URL = document.getElementById("ImageURL").value;
    $(".bgimg").css('background-image',"url(" +URL +")");
});