0

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

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

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

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

4

4 回答 4

1

根据您的标记，如果您给出<span>an idof Btn（为了具体起见），则以下内容将起作用：

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

演示：jsfiddle.net/mSAsU

于 2011-05-13T04:36:44.777 回答
1

在 <head> 中：

<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 -->

如果您有问题，请告诉我:)

于 2011-05-13T04:42:04.820 回答
0

基本上你可以：

$('input[type=submit]').click(function(){
    // for example changing it by appending "a"
    $("#ImageUrl").val($("#ImageUrl").val() + 'a';
});
于 2011-05-13T04:33:17.917 回答
0

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

$("#ImageUrl").blur(function(){
    $("#Image").css("background-image", "url("+$(this).val()+")");
});
于 2011-05-13T04:42:36.377 回答