如何根据网址动态更改背景图像

时间:2016-09-07 12:11:50

标签: javascript css url background

我尝试动态更改页面加载,后台取决于您所在的URL。但它对我不起作用。

var camera1 = "url1";
var camera2 = "url2";
var camera3 = "url3";
var currenturl = window.location;
jQuery(function($)
{
  if(camera1 == currenturl) 
  {
    $(".breadcrumb-right").css("background", "url(url1.jpg)   !important;");
  }    
  else if (camera2 == currenturl) 
  {
    $(".breadcrumb-right").css("background-image", "url(url2.jpg)");
  }    
  else if (camera3 == currenturl) 
  { 
    $(".breadcrumb-right").css("background-image", "url(url3.jpg)");
  }    
});

2 个答案:

答案 0 :(得分:0)

小心window.location不返回字符串。 而是尝试使用
window.location.href表示完整网址(例如此页" How to change background image dynamically depending on the url")

window.location.pathname仅限路径(例如此页" / questions / 39369642 / how-to-change-background-image-dinamycally-depend-on-url")

答案 1 :(得分:0)

也许你可以改进代码做这样的事情:

const cameras = ['url1', 'url2', 'url3'];
const currentUrl = window.location.href;
const el = $(".breadcrumb-right");

if (cameras.includes(currentUrl)) {
  el.css("background-image", `url(${currentUrl})`);
}