小编Jes*_*sse的帖子

Javascript随机图像丢失样式

试图为我的Jumbotron设置随机背景图像.这是我到目前为止所拥有的.

function randomImage() {
  var images = [
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZwkTaJg28-Bxidgfm6FbHyEZ8D5ya1hGMroF05htuwvQqJsY9sQ",
    "http://www.shunvmall.com/data/out/193/47120931-random-image.png",
    "https://s-media-cache-ak0.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg"
  ];
  var imgAmount = images.length
  console.log(imgAmount);
  var x = Math.floor(imgAmount * Math.random())
  console.log(x);
  document.getElementsByClassName('jumbotron')[0].style.background = "url(" + images[x] + ") no-repeat center center fixed";
}
window.onload = randomImage;
Run Code Online (Sandbox Code Playgroud)

这适用于页面加载我的css表中定义的样式似乎被覆盖?

.container .jumbotron {
  background: url(/static/images/banner-1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-bottom: 0px;
  border-radius: 0px;
}
Run Code Online (Sandbox Code Playgroud)

有没有办法加载这些随机图像并保持已定义的其他样式?

另外,另一个快速问题..我使用getElementsByClassName [0]只是因为我无法使querySelector工作.我怎么用querySelector写这个?

html javascript css

8
推荐指数
1
解决办法
455
查看次数

标签 统计

css ×1

html ×1

javascript ×1