1

URLに従って背景画像を変更することは可能ですか？

たとえば、www.myurl.co.uk/halloween/

URL に /halloween/ が含まれている場合、本文 {background:url(/images/newbackground.jpg)}

私は以前にこれをやったと思いますが、私の人生では、それを行う方法を思い出せません.

jQuery優先？

4

6 に答える 6

4 
$(document).ready(function () {
    if(window.location.href.indexOf("halloween") > -1) {
       alert("your url contains the name halloween");
       $("body").css('background', 'url("images/newbackground.jpg")');
    }
});
于 2012-10-21T18:49:51.767 に答える
2

このスニペットはあなたのためにトリックをするかもしれません：

if(window.location.indexOf("halloween") != -1) {
  $("body").css('background', 'url(imgs/halloween.png)');
}

現在のURLで文字列「halloween」を検索し、その中のどこかで見つかった場合、本文の背景は「imgs/halloween.png」に設定されます。

于 2012-10-21T18:48:41.197 に答える
2

jQuery は、これに不要なオーバーヘッドを追加します。画像へのキーワードのマップが与えられた場合:

var images = {
    'halloween' : '/images/newbackground.jpg',
    'christmas' : '/images/xmasbackground.jpg'
};

あなたはこれを行うことができます：

var url = document.location.href,
    elem = document.getElementById('elementThatYouWantToStyle');

for (var keyword in images){
    if (images.hasOwnProperty(keyword) && url.indexOf(keyword) !== -1) {
        elem.style.backgroundImage = 'url(' + encodeURI(images[keyword]) + ')';
    }
}

そして今、完全に完成した (そしてありがたいことにデバッグされた) 関数形式:

var images = {
    'halloween': 'http://davidrhysthomas.co.uk/img/dexter.png',
    'christmas': 'http://davidrhysthomas.co.uk/img/mandark.png'
};

function setBG(el, map, url) {
    if (!el || !map) {
        return false;
    }
    else {
        url = url || document.location.href;
        /* means you can pass an element's `id` or a reference to the node itself */
        el = el.nodeType == 1 ? el : document.getElementById(el);
        for (var keyword in map) {
            if (map.hasOwnProperty(keyword) && url.indexOf(keyword) !== -1) {
                el.style.backgroundImage = 'url(' + map[keyword] + ')';
            }
        }
    }
}

setBG('one', images, 'http://some.domain.com/with/halloween.jpg');
setBG(document.getElementById('two'), images, 'http://some.domain.com/with/christmas.jpg');

JS フィドルのデモ。

于 2012-10-21T18:52:14.640 に答える
1

これを試して

<script>

    var currentUrl = document.URL;

    if(currentUrl == 'www.myurl.co.uk/halloween/')
      document.body.style.backgroundImage = 'url(/images/newbackground.jpg)';
</script>
于 2012-10-21T18:54:06.220 に答える
0

たとえば、/ halloween /のように、jQueryを介してすべてのページの本文にクラスを追加します。$（ "body"）。addClass（ "halloween"）;

次に、Cssで：body.halloween{/*カスタムbg*/}

次に、すべてのリンクをオレンジ色にすることもできます。body.halloween{color：orange;}

于 2012-10-21T18:49:32.743 に答える
0

スクリプトタグに以下のコードを含めます -

$(document).ready(function() {
    var path = window.location.href.split("/");
    if (path.length > 2) {
       if(a[2] == "halloween" ) { 
           $('body').css({background : 'url(/images/newbackground.jpg)' });
       }
       else if(a[2] == "something_else") {
           $('body').css({background : 'url(/images/something_else.jpg)' });
       }
       //more else if for other images
    }

});
于 2012-10-21T18:51:38.913 に答える