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

因此，由于我在为网站确定绝对主题时遇到问题，我想让用户从下拉菜单中选择一个主题，并且当单击某个选项时，它将更改背景图像、背景颜色和背景定位。

例如。如果用户选择“Mario Bros 3”主题，他们会得到

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

如果你选择“Zelda LTTP”主题，你会得到

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

我希望它位于下拉菜单中，并让它记住您的选择，以便每次都适用。

我几乎不知道该怎么做，有人可以帮忙吗？

我会根据主体的不同类别选择主题，如下所示：

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（或服务器端）设置主体类并将选择保存在 cookie 中。

确切地说，将 css 放入 css 文件中，然后您可以像这样更改它：

HTML:

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

pure JS:

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

or jQuery http://jquery.com/如果你更喜欢：

$('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();
});