如何動態更改背景顏色的html？

我想要改變html或body的背景（漸變）以響應事件。是否有可能使用jQuery更改background-color屬性？或者（我有CSS類中描述的背景漸變*）我需要removeClass然後addClass？如果是後者，我會有一個小小的困境：我要用三種不同的顏色。我是否需要通過removeClass移除其他顏色（儘管顯然只有一個是活動的），還是有一種方法可以通過編程來確定當前正在使用哪一種顏色並刪除它？我認爲我可以在ready函數上使用全局變量來跟蹤這個變量，但是有沒有更好/更優雅的方法？如何動態更改背景顏色的html？

下面是一個例子CSS類，生成使用http://www.colorzilla.com/gradient-editor/：

.silverBackground { 
    background: #e2e2e2; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0); /* IE6-9 */ 
}

來源

2013-07-13 B. Clay Shannon

所有這一切都可以通過jQuery來改變。您可以從字面上更改對象的這些屬性，或者使用jQuery在您預先定義的幾個不同的類之間進行選擇（如果您只是想在幾組精心設置之間進行切換）。 – lurker

是的，你基本上自己回答你的問題。我個人認爲我會選擇變量 - 我認爲這是一個很好的方法。 – SharkofMirkwood

此問題已被多次詢問。看看下面的[列表]（https://www.google.nl/search?q=jquery+color+background&ie=UTF-8&oe=UTF-8） –

這是我怎麼會做

$('someElement').click(function(){ // 1 
    var newClass = $(this).attr('toggleColor'); // 2 
    $(document.body).removeClass('color1 color2 color3').addClass(newClass); // 3 
});

-----詳細--- ---

步驟

click事件添加到要切換不同的顏色

元素獲取新類的名稱我假設你有這樣的一個屬性的元素

刪除每色然後添加新元素

來源

2013-07-13 15:47:55 iConnor

如何動態更改背景顏色的html？

回答

步驟

相關問題