更改 div 的背景图像

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来检测url路径，如果它在根目录，那么背景将是defaultpic.jpg，如果/page1/将使用picture1.jpg，/page2/将使用picture2，/page3/将使用图片3.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';

参考资料：

• Array.prototype.shift()。
• HTMLElement.style。
• Location API。
• String.replace()。
• String.prototype.split。
• Window.location。

Answer 2

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

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

var currentPage = document.URL;

1. 使用上面的 url 字符串来识别您的特定页面（您可能需要使用 substring() 来提取它。）
2. 使用 switch/case 或条件块将正确的图像分配给正确的页面。

不应该那么复杂。

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 文件 - 只插入我想要更改 bg 的页面，它会覆盖现有的“topbox”类。 #topbox {backgroundurl('path/to/image/file.jpg') !important; 时间不多了，但这项工作。不确定这是否是正确的方法，但它现在有效。我将返回并使用此处提供的代码并应用于该页面。 感谢您的所有帮助，

Answer 6

由于无法访问 html，可以通过 2 种方式解决。

1. 根据 url 从 js 文件动态地将类添加到 id 为 topbox 的 div，并将背景 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); }

1. 直接从 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;
}