单击按钮更改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');
    });
});