Question

我想将一个随机background-image注入div。我came across使用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替代品，但它们都相对冗长或不必要地“忙碌”。对此有任何帮助非常感谢。

Answer 1

这也可以在普通的JS中轻松完成：

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

Answer 2

普通的javascript代码可能是

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

Answer 3

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

如何在没有jQuery的情况下完成“使用jQuery的不可能简单的图像随机化器”

3 个答案: