Javascript 更改div的背景图像

我有4页。例如：here.com/、here.com/page1/、here.com/page2/、here.com/page3/

所有4页都使用相同的模板（我没有编写模板），并且它有一个带有背景图像的顶框。大概是这样的：

<div id="topbox">some text here</div>

问题是所有4个页面都使用相同的图像，因为它具有相同的id#topbox，我无法进入并更改页面的结构。

---

有没有一种方法可以使用js来检测url路径，比如说如果它位于根目录，那么背景将是defaultpic.jpg，如果/page1/将使用picture1.jpg，/page2/将使用picture2，/page3/将使用picture3.jpg根据您提供的信息，我建议：

var pagePicture = {
    'page1' : 'picture1',
    'page2' : 'picture2',
    'page3' : 'picture3'
}

var page = window.location.pathname.replace(/^\//,'').split('/').shift();

document.getElementById('topbar').style.backgroundImage = (pagePicture[page] || 'default') + '.jpg';

参考资料：

---

按照以下步骤操作。希望能对你有所帮助

使用以下方法获取页面URL：

---

var currentPage=document.URL如果不能修改div（唯一包含），那么使用js检测不是一个好的选择

如果您可以在div中添加类：

  <div id="topbox" class="page1">    

<script type="text/javascript">
 window.onload = function() {  
  var path= window.location.pathname.split( '/' );
  var page = path[path.length - 1];
  var matchPageNumb = page.match(/([0-9]+)/g);
  if( matchPageNumb.length ) {
    var node = document.getElementById('topbox');
    if( node !== null ) {
      var bgURL = "url('path/to/image/picture" + matchPageNumb[matchPageNumb.length-1] +".jpg') no-repeat";
      node.style.background = bgURL;
    }
  }
 }
</script>

对所有页面重复此过程

JS检测案例：

  <div id="topbox" class="page1">    

<script type="text/javascript">
 window.onload = function() {  
  var path= window.location.pathname.split( '/' );
  var page = path[path.length - 1];
  var matchPageNumb = page.match(/([0-9]+)/g);
  if( matchPageNumb.length ) {
    var node = document.getElementById('topbox');
    if( node !== null ) {
      var bgURL = "url('path/to/image/picture" + matchPageNumb[matchPageNumb.length-1] +".jpg') no-repeat";
      node.style.background = bgURL;
    }
  }
 }
</script>


window.onload=函数（）{
var path=window.location.pathname.split（'/'）；
var page=path[path.length-1]；
var matchPageNumb=page.match（/（[0-9]+）/g）；
if（matchPageNumb.length）{
var节点=document.getElementById（'topbox'）；
如果（节点！==null）{
var bgURL=“url（'path/to/image/picture“+matchPageNumb[matchPageNumb.length-1]+”.jpg'）不重复”；
node.style.background=bgURL；
}
}
}
下面的代码应该执行您想要的操作：

function getPictureForPage() {
    var url = document.URL; // for example: http://www.here.com/page2/mypage.html
    var page = url.substring(20).split('/')[0]; // Stripping 'http://www.here.com/' from the url, then splitting on '/' to split the remaining url, and get the first element ('page2')

    switch (page) {
        case 'page1': 
            return 'picture1.jpg';
        case 'page2': 
            return 'picture2.jpg';
        case 'page3': 
            return 'picture3.jpg';
    }
    return 'defaultpic.jpg';
}    

document.getElementById('topbox').style.background = "url('" + getPictureForPage() + "')";

由于您无法访问html，您可以通过两种方式解决此问题

根据url并将后台css应用于相应的类，从js文件中动态地将id为topbox的类添加到div中
jQuery代码

var url = window.location.pathname;
var divCls = '';
switch(url) {
    case 'here.com/page1/': divCls = 'page1';
             break;

    case 'here.com/page2/': divCls ='page2';
             break;

    case 'here.com/page3/': divCls ='page3';
             break;

    case 'here.com/page4/': divCls ='page4';
             break;

    default: divCls ='page';
             break;
}

$("#topbox").addClass(divCls);

var weburl = window.location.pathname;
var chksplit = weburl.split('/');
switch(chksplit[0]) {
    case 'page1': $("#topbox").css("background-image": "url(../page1.jpeg)");
             break;

    case 'page2': $("#topbox").css("background-image": "url(../page2.jpeg)");
             break;

    case 'page3': $("#topbox").css("background-image": "url(../page3.jpeg)");
             break;

    case 'page4': $("#topbox").css("background-image": "url(../page4.jpeg)");
             break;
}

CSS

#topbox.page1 { background-image: url(../page1.jpeg); }
#topbox.page2 { background-image: url(../page2.jpeg); }
#topbox.page3 { background-image: url(../page3.jpeg); }
#topbox.page4 { background-image: url(../page4.jpeg); }

直接应用javascript中的背景图像
jQuery代码

var url = window.location.pathname;
var divCls = '';
switch(url) {
    case 'here.com/page1/': divCls = 'page1';
             break;

    case 'here.com/page2/': divCls ='page2';
             break;

    case 'here.com/page3/': divCls ='page3';
             break;

    case 'here.com/page4/': divCls ='page4';
             break;

    default: divCls ='page';
             break;
}

$("#topbox").addClass(divCls);

var weburl = window.location.pathname;
var chksplit = weburl.split('/');
switch(chksplit[0]) {
    case 'page1': $("#topbox").css("background-image": "url(../page1.jpeg)");
             break;

    case 'page2': $("#topbox").css("background-image": "url(../page2.jpeg)");
             break;

    case 'page3': $("#topbox").css("background-image": "url(../page3.jpeg)");
             break;

    case 'page4': $("#topbox").css("background-image": "url(../page4.jpeg)");
             break;
}

我能够让它工作，通过插入另一个css文件后，现有的一个-只有页面我想改变bg，它覆盖现有的“topbox”类。
#topbox{backgroundurl（'path/to/image/file.jpg'）！重要；
时间不多了，但这是可行的。不确定这是否是正确的方法，但它现在起作用了。我将返回并使用此处提供的代码并应用于页面。
感谢您的帮助，
我将无法添加class=“page1”部分：（好的！因此您可以使用“JS检测案例”。我尝试了代码（方法2），通过在3个不同文件夹/page1/、/page2/、和/page3/-下创建3个页面，但它没有这样做。请看一看，在上面的示例中，我们提供了页面url。请让我知道您是否提供了页面url或页面名称。它应该是页面url，页面1、页面2、页面2将不完全相同，但它们是如果是“/help/，我想显示blah.jpg。很抱歉，我没有自己的服务器来发布我的示例页面。但是我先把指向googleapis jquery的链接放在头上，然后把你的代码放在头上。然后在正文中我有请检查上面的代码。这对你有用。