[英]Change background image of a div
I have 4 pages. 我有4页。 for example: here.com/, here.com/page1/, here.com/page2/, here.com/page3/
例如:here.com/、here.com/page1/、here.com/page2/、here.com/page3/
all 4 pages is using the same template (i didn't write the template), and it has a top box with a background image. 所有4个页面都使用相同的模板(我没有编写模板),并且它的顶部带有背景图像。 something like this:
像这样的东西:
<div id="topbox">some text here</div>
the css: CSS:
#topbox {background:url('path/to/image/here.jpg') no-repeat};
Problem is all 4 pages is using the same image since it has the same id #topbox, and I'm not able to go in and change the structure of the pages. 问题是所有4个页面都使用相同的图像,因为它具有相同的ID #topbox,并且我无法进入并更改页面的结构。 Is there a way that I can use js to detect the url path, say if it's at root then background will be defaultpic.jpg, if /page1/ will use picture1.jpg, /page2/ will use picture2, /page3/ will use picture3.jpg
有没有一种方法可以使用js来检测url路径,比如说如果它位于根目录,那么背景将是defaultpic.jpg,如果/ page1 /将使用picture1.jpg,/ page2 /将使用picture2,/ page3 /将使用picture3.jpg
From the information you've given, I'd suggest: 根据您提供的信息,我建议:
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';
References: 参考文献:
follow the below steps. 请按照以下步骤操作。 hope it will help you as a guidance.
希望对您有帮助。
var currentPage = document.URL;
shouldn't be that complex. 不应该那么复杂。
Used js detection isn't a good choise apart if you can't modify your div (unique include). 如果您无法修改div(唯一包含),则使用过的js检测不是一个很好的选择。
In case when you can add class in your div: 如果可以在div中添加类:
<div id="topbox" class="page1">
And in your CSS: 在您的CSS中:
#topbox.page1 {background:url('path/to/image/picture1.jpg') no-repeat};
Repeat this procedure for all your pages. 对所有页面重复此过程。
JS detection case : 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>
Below code should do what you want: 下面的代码应该做你想要的:
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() + "')";
I was able to get it to work, by inserting another css file after the existing one - to only the page i want to change the bg, and it overwrite the existing 'topbox' class. 通过在现有文件之后插入另一个css文件,仅在我要更改bg的页面上,我能够使其工作,并且它覆盖了现有的“ topbox”类。 #topbox {backgroundurl('path/to/image/file.jpg') !important;
#topbox {backgroundurl('path / to / image / file.jpg')!important; running out of time, but this work.
时间用完了,但是这项工作。 not sure if this's the right way to do it, but it works ... for now.
不确定这是否是正确的方法,但目前仍有效。 i'll visit back and use the codes was provided here and apply to the page.
我将返回并使用此处提供的代码并将其应用于该页面。 thanks for all your help,
感谢你的帮助,
As you are unable to go to the html, you can get this solved by 2 ways. 由于您无法访问html,因此可以通过2种方法解决此问题。
jQuery Code 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 的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); }
jQuery Code 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.