單擊按鈕更改div id？

Question

現在我正在努力創建一個可以在主頁上展示多個圖像的網站，只需點擊一下按鈕即可循環播放。 幾乎像一個畫廊，但更多的是面向頁面預覽。 我想弄清楚的是如何在單擊按鈕時更改div的id / class。

我已經看了幾個其他問題，但沒有一個問題表明4個不同的ID。

我是JavaScript的新手，我正在努力找出最適合我的情況。

這是我為我的頁面制作的jsFiddle。 目標是讓頂部的按鈕在點擊時將綠色div #Filler更改為新的id / class。

http://jsfiddle.net/xCGDT/1/

#Filler {
margin: auto;
max-height: 700px;
width: 1400px;
background-color: green;
max-width: 1366px;
height: 800px;
z-index: 1;
margin-top: -250px;
overflow: inherit;
background-image: url(nature5.jpg);
animation: Filler 1s 1;
-webkit-animation: Filler 1s 1;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
opacity:1; }

變成

#Filler2 {
margin: auto;
max-height: 700px;
width: 1400px;
background-color: red;
max-width: 1366px;
height: 800px;
z-index: 1;
margin-top: -250px;
overflow: inherit;
animation: Filler 1s 1;
-webkit-animation: Filler 1s 1;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
opacity:1;

}

就像我說的那樣，我對此非常陌生，這適用於WebDesign類項目。

Answer 1

使用Javascript：

document.getElementById('Filler').id = 'Filler2';

Answer 2

嘗試

包括jquery庫並執行

$(function() {
    $('#Filler').click(function() {
        $(this).attr('id', 'Filler2');
    });
});

Answer 3

以下內容將更改給定元素的類或ID（回答您的問題）

var element = document.getElementById("myElement");
element.setAttribute("class", "aNewClass");
element.setAttribute("id", "aNewID");

但我不會以你的小提琴暗示你的方式來處理事情

我用＃元素選擇器定義共享CSS，然后用差異來定義。 類選擇器並僅替換類

這是一個例子http://jsfiddle.net/thisishardcoded/XRgbM/

Answer 4

答案是：node.setAttribute。

一個重要的建議：不要在HTML中使用重復的ID。 ID應該標識單個節點。 如果您需要具有相同標識符的多個項目，請使用類。

您可以將此代碼放入您的小提琴中，並按要求運行。

var links = document.getElementById('Nav').getElementsByTagName('A');
var filler = document.getElementById('Filler');
for(var i=0;i<links.length;i++) (function(j){
    links[j].addEventListener('click', function(e){
        filler.setAttribute('id', 'Filler'+(j?j:''));
    });
})(i);

另外在其他答案中查看jQuery示例，您的生活會輕松得多。