Question

我想写一个html，其中一个部分是这样的：

<div id="...." style="background-image:url(---.jpg);">
    <p>...</p>
</div>

我正在考虑在主机目录中创建一个图像文件夹，并为用户提供选择适当图像的选项，该图像可以作为上述背景。有人可以建议我，如何实现这一目标？

Answer 1

您可以向用户显示图像然后使用jQuery，为图像的click事件添加一个函数然后，此函数将div的背景设置为适当的图像。

<img src="..." class="bg_image" />
<img src="..." class="bg_image" />
<img src="..." class="bg_image" />

<script type="text/javascript">
$('.bg_image').click(function(){
    $('#the_div').css('background-image', $(this).css('backgound-image'));
});
</script>

将其作为sudo代码阅读，以了解您应该如何做到这一点。我还没有测试过。

Answer 2

您可以像这样访问样式属性：

document.getElementById("....").style.backgroundImage = 'url(whatever.jpg)';

Answer 3

<div id="target" ></div>

var div = document.getElementById('target');
div.style.backgroundImage = "url('pics/intro.gif')";

路径形成变量

var path = "pics/intro.gif";
div.style.backgroundImage = "url('" + path + "')";

或使用jQuery

$("#target").css("background-image", "url('" + path + "')");

Answer 4

你想要的并不像你想象的那么简单

如果您不想关心文件夹中可用的图像，则需要一个服务器进程，可以将该文件夹的内容作为列表返回，例如给定

<div id="someDiv">Some content to make sure the div is not collapsed</div>

你需要生成这样的东西（不建议内联，使用jQuery或类似的方法会简化你的代码）

<a href="someimage.jpg" 
onclick="document.getElementById('someDiv').style.backgroundImage=this.href;
return false"><img src="someimage.jpg" height="100" /></a>

要使用自动填充，您可以

$(document).ready(function() {
  $("input#autocomplete").keypress(function(e) {
    if (e.which == 13 ) {
      $('#someDiv').("background-image", "url("+$(this).val()+")");
      event.preventDefault();
    }
  });
  $("input#autocomplete").autocomplete({
      source: ["apple.jpg", "banana.jpg","orange"]
  });
});

<div>部分</div>的可更改背景

4 个答案: