允许用户使用下拉菜单更改CSS设计元素？

Question

所以,因为我已经决定为我的网站绝对主题的问题,我想,让用户选择从下拉菜单中选择一个主题,并点击的选项时,它会更改背景图片,背景颜色和背景定位.

例如.如果用户选择了"Mario Bros 3"主题,他们就会得到

background-image:url('smb3.jpg');
background-repeat:repeat-x;
background-position:left bottom;
background-attachment: fixed;
background-color: #6899f8;

如果你选择"塞尔达LTTP"主题,你会得到

background-image:url('zeldalttp.jpg');
background-repeat:no-repeat;
background-position:left bottom;
background-attachment: fixed;
background-color: Black;

我想将它放在下拉菜单中,让它记住您的选择,以便每次都适用.

我接下来不知道怎么做,有人可以帮忙吗？

Answer 1

我会选择身体上不同类别的主题,如:

body.smb2{
    background-image:url('smb3.jpg');
    background-repeat:repeat-x;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: #6899f8;
}
body.zelda{
    background-image:url('zeldalttp.jpg');
    background-repeat:no-repeat;
    background-position:left bottom;
    background-attachment: fixed;
    background-color: Black;
}

然后使用javascript(或服务器端)设置body类并将选项保存在cookie中.

确切地说,将css放在一个css文件中然后你就可以改变它:

HTML:

<select id="select">
    <option value=""></option>
    <option value="smb2">SMB 2</option>
    <option value="zelda">Zelda</option>
</select>

纯JS:

var sel = document.getElementById('select');
sel.onchange = function(){
    document.body.className = sel.value;
};

或者jQuery的,如果你喜欢:

$('select').change(function(){
    $('body').prop('class',$(this).val());    
});

好的,您网站上的问题是,正文已经有一堆其他类.并且className会覆盖所有这些.一种解决方案是保存旧类,然后添加新的类:

var saveclass = null;
var sel = document.getElementById('select');
sel.onchange = function(){
    saveclass = saveclass ? saveclass : document.body.className;
    document.body.className = saveclass + ' ' + sel.value;
};

或者jQuery:

var currentclass = null;
$('select').change(function(){
    $('body').removeClass(currentclass).addClass($(this).val());
    currentclass = $(this).val();
});