引導按鈕可切換主體的背景圖像

Question

我正在嘗試使用引導按鈕切換背景圖像。

我在css中...

body { 
   background-image: url('img/myimage_1.gif');
}

在html中...

<button type="button" id="bkgchange" class="btn" data-toggle="button">Change the background</button>

並在腳本中...

$( 'bkgchange' ).click(function() {
    $( #body ).css( 'background-image', '~/img/myimage_2.gif' );
});

而且不起作用？！ 任何指針。 我知道要弄亂身體屬性是不合常規的，我不能將圖像作為div背景或容器放置，因為它本身不會表現...

作為替代解決方案，歡迎使用替代方案。

Answer 1

嘗試這個

$( '#bkgchange' ).click(function() {
    $('body').css( 'background-image', 'url(/img/myimage_2.gif)' );
});

bkgchange是按鈕的id ，因此，如果要通過jQuery訪問它，則需要在其前面放置# 。 像$('#bkgchange') ，您想從頁面訪問body元素，因此您需要通過$('body')而不是$(#body)來訪問它。

要放置background-image ，其模式為url(path-of-image) ，並且不能將~/與url一起使用，因為css不知道它應該引用根目錄，可以嘗試使用/引用root目錄。

Answer 2

$( '#bkgchange' ).click(function() {
   $('body').css( 'background-image', 'url(http://terangatimes.com/wp-content/uploads/2013/02/html-pointing-sign-clipart.jpg)' );
});

http://jsfiddle.net/B72sv/

您錯過了#以按ID獲取bkgchange按鈕。 而且您的body不需要#您無需按ID選擇它。

另外，您在CSS上缺少url(並確保圖像的url是完整路徑。

$( 'bkgchange' ).click(function() { $( #body ).css( 'background-image', '~/img/myimage_2.gif' ); });