Question

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

所有4个页面都使用相同的模板（我没有写模板），它有一个带有背景图像的顶部框。像这样的东西：

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

css：

#topbox {background:url('path/to/image/here.jpg') no-repeat};

问题是所有4个页面都使用相同的图像，因为它具有相同的id #topbox，并且我无法进入并更改页面的结构。有没有办法可以使用js来检测网址路径，比如它是否在root用户然后背景将是defaultpic.jpg，如果/ page1 /将使用picture1.jpg，/ page2 /将使用picture2，/第3页/将使用picture3.jpg

Answer 1

根据您提供的信息，我建议：

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';

参考文献：

Answer 2

按照以下步骤操作。希望它能帮助你作为指导。

使用以下网址获取网页网址：

var currentPage = document.URL;

使用上面的url字符串来标识您的特定页面（您可能需要使用substring（）来提取它。）
使用开关/案例或条件块将正确的图像分配到正确的页面。

不应该那么复杂。

Answer 3

如果你不能修改你的div（唯一包含），使用js检测不是一个好的选择。

如果您可以在div中添加课程：

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

在你的CSS中：

#topbox.page1 {background:url('path/to/image/picture1.jpg') no-repeat};

对所有页面重复此过程。

JS检测案例

<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>

Answer 4

下面的代码应该做你想要的：

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() + "')";

Answer 5

我能够通过在现有的css文件之后插入另一个css文件来使其工作 - 只到我想要更改bg的页面，并覆盖现有的“topbox”类。 #topbox {backgroundurl（'path / to / image / file.jpg'）！important; 耗尽时间，但这项工作。不确定这是否是正确的方法，但它现在有效。我将回访并使用此处提供的代码并应用于该页面。谢谢你的帮助，

Answer 6

由于你无法使用html，你可以通过两种方式解决这个问题。

根据网址动态从js文件向id topbox添加类，并将背景css应用于各自的类。

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);

<强> 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 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;
}

更改div的背景图像

6 个答案: