當頁面加載時，在jQuery中更改元素的背景圖像？

我現在有點被卡住了，我基本上在DOM中有我的頭元素，並且我在CSS中爲索引頁面硬編碼了一個背景圖像。當頁面加載時，在jQuery中更改元素的背景圖像？

我當時想要做的就是讓這張圖片在不同的頁面上改變。我認爲這將是一件非常簡單的事情。

$('header').css("background-image","url(assets/img/consulting.png)")

我意識到沒有事件觸發器，但我的印象是我不需要實際做到這一點。

另外我的CSS文件和文件的頁面我添加jQuery是在img文件夾在不同的文件夾中......我不確定我應該如何調用在jQuery代碼中的URL。應該像從CSS文件或HTML文件中導航一樣？

謝謝你們，抱歉，如果我錯過了這裏真正明顯的東西。

來源

2012-05-23 Dacu

這是我會採取的方法，只是爲了從jQuery中刪除大部分的CSS，儘管你可能很簡單想要一個點擊事件。

我會爲每個頁面執行此操作。

<body class="home"> 
<body class="about"> 
<body class="contact">

然後在你的CSS做

.home header { background-image: url(../assets/img/consulting.png"; } 
.about header { background-image: url(../assets/img/consulting2.png"; } 
.contact header { background-image: url(../assets/img/consulting3.png"; }

如果你的網站加載其他頁面的內容而無需刷新他們，你可以做一個單一的指標。

$(function(){ 
    $('#aboutlink').click(function(e){ 
     $('body').removeClass().addClass('about'); 

     //your other snippets here 

     e.preventDefault(); 
    }); 
});

來源

2012-05-23 22:52:42

非常感謝。我打算採用這種方法，因爲考慮到不是每個人都啓用了JavaScript，它可能會更好。我仍然無法弄清楚爲什麼我最初做的沒有奏效！甚至沒有發生錯誤。 jQuery神祕我猜！ – Dacu

乾杯。我想說大多數瀏覽器現在已經啓用了JS，但是這是更好的解決方案IMO，因爲CSS加載速度更快，並且在其正確的上下文中使用。使用JS來完成一個意味着樣式表的工作對我來說有一點意義。 –

要更改頁面的初始狀態，您必須等待才能運行JavaScript，直到頁面加載完畢。

有幾種方法可以做到這一點。 jQuery中最常見的是：

1）使用的document.ready（）：

$(document).ready(function() { 
    $('header').css("background-image","url(assets/img/consulting.png)") 
});

2）將你的代碼的<script>標籤內，但在身體的末端（右</body>標記之前），所以它在HTML已被解析後運行。

當然，您必須確保您的圖片網址也是正確的，並且有適當的路徑規範可供瀏覽器找到。

如果您控制頁面的HTML/CSS，那麼將初始狀態放入頁面的CSS樣式會好得多，因爲頁面只會從一開始就以正確的方式呈現，而不是呈現一個方法，然後使用JS將其更改爲另一種方式。

來源

2012-05-23 22:46:55 jfriend00

感謝您的建議，我已經嘗試了您所提到的一切，我仍然沒有任何喜悅。我無法使用CSS來更改背景圖片，因爲它只會更改另一頁上的背景圖片。如果我想成爲一個非常懶惰的編碼器，我可以爲每個單獨的頁面元素添加一個類，併爲每個元素分配自己的背景圖片，但我寧願不要！：P – Dacu

@Dacu - 如果你可以把JavaScript放在一個特定的頁面中，你可以把CSS放在那個特定的頁面中。而CSS得到更早的解析。我不明白爲什麼你不能使用CSS或爲什麼JS不起作用。你能提供一個到頁面的鏈接嗎？ – jfriend00

當頁面加載時，在jQuery中更改元素的背景圖像？

回答

相關問題