Question

我有一个输入元素，一个span和一个带有背景图像属性的div。

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

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

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

Answer 1

根据您的标记，如果您<span> id Btn $("#Btn").click(function(){ $("#Image").css("backgroundImage", "url('"+$("#ImageUrl").val()+"')"); });（为了特殊性），以下内容可行：

{{1}}

演示：jsfiddle.net/mSAsU

Answer 2

In＆lt;头＆GT; ：

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

In＆lt;体＆GT; ：

<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 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()+")");
});

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

4 个答案: