允许用户通过下拉菜单更改CSS设计元素吗？ [英] Allow the user to change CSS design elements with a dropdown menu?

问题描述

因此，由于我在确定网站的绝对主题时遇到问题，因此我想让用户从下拉菜单中选择主题，然后单击某个选项，它将更改背景图像，背景色

So, since I have problems deciding an absolute theme for my site, I'd like to let the user choose a theme from a dropdown menu, and when an option is clicked, it'll change the background image, background color, and background positioning.

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

eg. If the user chose the "Mario Bros 3" theme, they'd get

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

如果您选择 Zelda LTTP主题，您将得到

And if you select "Zelda LTTP" theme, you'd get

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

我希望它出现在下拉菜单中，并记住您的选择，以便

I'd like this to be in a dropdown menu, and have it remember your choice, so that it applies every time.

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

I have next to no idea how to do this, can anybody help?

推荐答案

我将按身体上不同类别选择主题，例如：

I'd select the themes by different classes on the body, like that:

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类并保存

Then set the body class with javascript (or server-side) and save the choice in a cookie.

确切地说，将css放在css文件中，然后可以像这样进行更改：

Exactly, put the css in a css file then you could change it like that:

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覆盖所有这些。
一种解决方案是保存旧的类，然后添加新的类：

---

Ok the problem on your site is, that the body already has a bunch of other classes. And className overwrites all of them. One solution would be to save the old classes and then add the new ones like that:

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

这篇关于允许用户通过下拉菜单更改CSS设计元素吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！