将背景图像 URL 更改为输入字段的值

Question

我有一个输入元素、一个跨度和一个带有背景图像属性的 div。

<span>Go</span><input id="ImageUrl"/>

<div id="Image"></div>

我正在尝试创建一个脚本，如果用户将链接粘贴/键入到输入字段中，然后单击“Go”按钮，则 div 的背景图像属性将更改为该 url。

Answer 1

在<头> ：

<script  type="text/javascript">
    function show() {
        $('#Image').css('background-image', 'url("' + $('#ImageUrl').val() + '")');
    }
</script>

在<身体> :

<span>Go</span><input id="ImageUrl"  /> <!-- the textbox can get the user input Url of Image-->
<div id="Image" style="width:200px; height:200px;"></div> <!-- the div which show Image -->
<input type="button" value="Go" onclick="show()" /> <!-- the GO button -->

如果有问题请告诉我:)

Answer 2

根据您的标记，如果您为 提供 id 为 Btn （为了具体起见），以下内容将起作用：

$("#Btn").click(function(){
    $("#Image").css("backgroundImage", "url('"+$("#ImageUrl").val()+"')");
});

演示：jsfiddle.net/mSAsU

Answer 3

基本上你可以：

$('input[type=submit]').click(function(){
    // for example changing it by appending "a"
    $("#ImageUrl").val($("#ImageUrl").val() + 'a';
});

Answer 4

这应该可以很好地工作。请注意，您必须在 CSS 函数调用中包含 url() 部分。

$("#ImageUrl").blur(function(){
    $("#Image").css("background-image", "url("+$(this).val()+")");
});