0

我想将随机background-image注入一个div。我遇到了以下代码，它使用 jQuery 库完美地做到了这一点：

设置图像数组：

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];

使用先前定义的数组设置随机背景的 div：

$('#div').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

事情是这样的——我想这样做而不必加载 jQuery 库。我喜欢上面代码的简单性，但我是 Javascript 语言的新手，我不知道要重新格式化它以便在没有 jQuery 的情况下使用。

我花了一些时间寻找上述代码的 Javascript 替代方案，但它们都相对冗长或不必要的“忙”。非常感谢您对此的任何帮助。

4

3 回答 3

3

这也可以在纯 JS 中轻松完成：

var div = document.querySelector('#div');
div.style.backgroundImage = 'url(images/' + 
   images[Math.floor(Math.random() * images.length)] + ')';
于 2013-01-26T09:15:21.260 回答
1

一个普通的 javascript 代码可能是

document.getElementById('div').style.backgroundImage = 'url(images/'+images[Math.floor(Math.random() * images.length)]+')';

于 2013-01-26T09:16:40.357 回答
0

jQuery 如此受欢迎的原因是因为它允许在所有平台和浏览器上创建如此清晰简洁的代码。因此，如果您真的打算在纯 JavaScript 中重新创建那种清洁度……我怀疑这是可能的。我可能会建议您尝试将其重新创建为一个项目来自学 JavaScript，但我怀疑任何人都可以提出使用 jQuery 作为基础的更简洁的解决方案。

于 2013-01-26T09:11:11.757 回答