javascript

Question

我正在尝试建立一个门户网站，房地产经纪人可以在其中展示他们的财产。每个用户都可以构建自己的一组彩色主题，但基本布局保持不变。用户只能更改布局中不同块的背景颜色、文本颜色。管理此问题的最佳方法是什么？

将所有详细信息保存在数据库中并提供 css 文件是否很好？我想这会延迟页面加载。是否还有其他选项，例如使用 XML 等？

score 2 · Accepted Answer

您可以通过body为每个用户设置一个类到主标记，从一个字段中获取，可能是theme从 SQL 数据库中获取。我早就写了一篇关于它如何工作的教程。对你来说也是如此：

在 Web 中进行主题化的简单方法

我们很多人都会有这个问题。主题随处可见，但我们自己的网站中的主题呢？我们有桌面主题、wordpress 主题，甚至是手机主题。我们不能在我们的网站中提供相同的功能吗？尽管我们已经看到许多具有主题功能的网站，但它们似乎很难！

传统网页主题

现在让我们看看 Web 中的传统主题是如何工作的。他们有两个以上的样式表 (CSS)，并且他们使用 JavaScript 将原始样式表替换为新样式表。这是非常困难和棘手的，因为href不建议更改样式表，而且旧浏览器不支持它们！

提议的简单主题

好吧，还有另一种更好更简单的方法来做同样的事情，但不会替换 DOM 元素及其属性。由于 CSS 是基于类和规则的，所以最好将布局和呈现分开，我们可以通过类来区分。好了，理论说的够多了。让我们进入实践部分。

考虑一个网页XHTML 1.1，它有几个组件，即带有链接的侧边栏，可以这样在 HTML 中给出：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Themed Website</title>            
    </head>
    <body>
        <div class="wrap">
            <div class="side">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#" class="active">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
            <div class="main">
                <h1>Welcome</h1>
                <h2>A Paragraph</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </p>
                <h2>A List</h2>
                <ul>
                    <li>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                    </li>
                    <li>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

现在我们需要在<link>标签的帮助下为文档添加一些样式：

<link rel="stylesheet" href="style.css" type="text/css" />

在中style.css，我们将首先添加样式来描述演示的方式。

布局

首先，骨架 CSS 将是，对于其中的所有元素：

body {}
body .wrap {}
body .wrap .side {}
body .wrap .side ul {}
body .wrap .side ul li {}
body .wrap .side ul li a {}
body .wrap .side ul li a:hover {}
body .wrap .side ul li a.active {}
body .wrap .main {}
body .wrap .main h1 {}
body .wrap .main h2 {}
body .wrap .main p {}
body .wrap .main ul {}
body .wrap .main ul li {}
body .wrap .main ul li p {}

完全填满 CSS，给我们：

body {font-family: segoe ui; background: #fff;}
body .wrap {width: 90%; margin: auto; overflow: hidden;}
body .wrap .side {width: 25%; float: left;}
body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
body .wrap .side ul li a.active {background: #0fc; color: #000;}
body .wrap .main {width: 75%; float: right; background: #0fc;}
body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
body .wrap .main h2 {margin: 0; padding: 10px;}
body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
body .wrap .main ul {margin: 0 10px 10px;}

主题化

现在我们的工作将是识别主题组件。在这里，使用基本布局，我们只能主题化无序列表的颜色和列表样式。让我们先单独了解这些样式。作为初学者的教程，让我们只关注前景色和背景色，而不是布局。

body {color: ; background: ;}
body .wrap .side ul li a {color: ; background: ;}
body .wrap .side ul li a:hover {color: ; background: ;}
body .wrap .side ul li a.active {color: ; background: ;}
body .wrap .main {background: ;}
body .wrap .main h1 {color: ;}
body .wrap .main h2 {color: ; background: ;}
body .wrap .main p {color: ;}
body .wrap .main ul li p {color: ;}

现在有了这组规则，我们需要添加类。Body 是内容的最顶层父级。因此，我们将添加类<body>并更改其他类的规则。

让我们将第一个类命名.light为，相同的 CSS 将是：

.light {color: #333; background: #f5f5f5;}
.light .wrap .side ul li a {color: #666; background: #eee;}
.light .wrap .side ul li a:hover {color: #333; background: #ddd;}
.light .wrap .side ul li a.active {color: #333; background: #0ff;}
.light .wrap .main {background: #0ff;}
.light .wrap .main h1 {color: #333;}
.light .wrap .main h2 {color: #666; background: #0fc;}
.light .wrap .main p {color: #093;}
.light .wrap .main ul li p {color: #09c;}

以上颜色是一些疯狂的组合。现在让我们创建另一个主题，让一切顺其自然grayscale。所有颜色的红色、绿色和蓝色值应该相同。

.grayscale {color: #333; background: #ccc;}
.grayscale .wrap .side ul li a {color: #666; background: #eee;}
.grayscale .wrap .side ul li a:hover {color: #333; background: #ddd;}
.grayscale .wrap .side ul li a.active {color: #333; background: #fff;}
.grayscale .wrap .main {background: #fff;}
.grayscale .wrap .main h1 {color: #333;}
.grayscale .wrap .main h2 {color: #fff; background: #999;}
.grayscale .wrap .main p {color: #666;}
.grayscale .wrap .main ul li p {color: #999;}

我们将使用jQuery来简化我们的工作。因此，在本<head>节中，我们将添加一个指向 jQuery 库的链接，可能来自Google API。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

请注意，出于稳定性目的，我们使用jQuery 1.7.2 。现在要更改代码，我们需要添加三个链接或按钮来处理主题更改。因此，在 HTML 中，让我们添加这三个链接：

HTML

<div class="wrap themelinks">
    <h4>Change Themes:</h4>
    <a href="" class="theme">No Theme</a>
    <a href="light" class="theme">Light</a>
    <a href="grayscale" class="theme">Grayscale</a>
</div>

CSS

.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.themelinks h4 {margin: 0; padding: 10px;}
.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.themelinks .theme:hover {background: #f90; color: #fff;}

jQuery

$(document).ready(function(){
    $(".theme").click(function(){
        var theClass = $(this).attr("href");
        $("body").removeAttr("class").addClass(theClass);
        return false;
    });
});

在这里，我们只更改标签的class属性，<body>所有浏览器都支持该属性。我们还为链接return false;的.click()功能添加了一个，以便不传播到标签的href属性中指定的链接。<a>

最终的 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Themed Website</title>
        <style type="text/css">
            body {font-family: segoe ui; background: #fff;}
            body .wrap {width: 90%; margin: auto; overflow: hidden; border: 1px solid #ccc;}
            body .wrap .side {width: 25%; float: left;}
            body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
            body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
            body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
            body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
            body .wrap .side ul li a.active {background: #0fc; color: #000;}
            body .wrap .main {width: 75%; float: right; background: #0fc;}
            body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
            body .wrap .main h2 {margin: 0; padding: 10px;}
            body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
            body .wrap .main ul {margin: 0 10px 10px;}

            .light {color: #333; background: #f5f5f5;}
            .light .wrap .side ul li a {color: #666; background: #eee;}
            .light .wrap .side ul li a:hover {color: #333; background: #ddd;}
            .light .wrap .side ul li a.active {color: #333; background: #0ff;}
            .light .wrap .main {background: #0ff;}
            .light .wrap .main h1 {color: #333;}
            .light .wrap .main h2 {color: #666; background: #0fc;}
            .light .wrap .main p {color: #093;}
            .light .wrap .main ul li p {color: #09c;}

            .grayscale {color: #333; background: #ccc;}
            .grayscale .wrap .side ul li a {color: #666; background: #eee;}
            .grayscale .wrap .side ul li a:hover {color: #333; background: #ddd;}
            .grayscale .wrap .side ul li a.active {color: #333; background: #fff;}
            .grayscale .wrap .main {background: #fff;}
            .grayscale .wrap .main h1 {color: #333;}
            .grayscale .wrap .main h2 {color: #fff; background: #999;}
            .grayscale .wrap .main p {color: #666;}
            .grayscale .wrap .main ul li p {color: #999;}

            .wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
            .themelinks h4 {margin: 0; padding: 10px;}
            .themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
            .themelinks .theme:hover {background: #f90; color: #fff;}
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".theme").click(function(e){
                    var theClass = $(this).attr("href");
                    $("body").removeAttr("class").addClass(theClass);
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div class="wrap">
            <div class="side">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#" class="active">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
            <div class="main">
                <h1>Welcome</h1>
                <h2>A Paragraph</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </p>
                <h2>A List</h2>
                <ul>
                    <li>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                    </li>
                    <li>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="wrap themelinks">
            <h4>Change Themes:</h4>
            <a href="" class="theme">No Theme</a>
            <a href="light" class="theme">Light</a>
            <a href="grayscale" class="theme">Grayscale</a>
        </div>
    </body>
</html>

您可以查看jsBin中的工作演示。

javascript - 如何动态管理不同布局的样式表？

1 回答 1

在 Web 中进行主题化的简单方法

传统网页主题

提议的简单主题

HTML

布局

主题化

JavaScript

最终的 HTML

Related

Reference