使用一个CSS选择网页外观而无需重新加载 [英] Selecting a web page look and feel without reloading, with one CSS
问题描述
我需要重新设计现有Web应用程序的CSS结构.它支持品牌"—它具有5种不同的外观.每个用户都有一个根据其工作所在的公司分配的品牌.
I need to redesign CSS structure of an existing web application. It supports "branding" — it's got 5 different look-and-feels. Each user has one assigned brand, based on the company they work for.
当前，我们有很多复杂的CSS文件，它们早已失控了.一个典型的网页包括4个样式表，模板系统决定哪个样式表.这意味着需要重新加载页面才能切换品牌.
Currently we have a bunch of complicated CSS files that have long since broken out of control. A typical web page includes 4 style sheets, templating system decides which ones. This means a page reload is needed to switch brands.
新的CSS系统应:
- 基于CSS脚本，最好是LESS或SaSS.
- 在目标环境中仅使用一个样式表.
- 允许品牌成为e̲ s̲ i̲ l̲ y̲切换而无需重新加载页面.
我的想法
借助CSS脚本，定义通用和基于品牌的规则:
My idea
With the help of CSS scripting, define general and brand-based rules:
p {
/* general settings */
}
#brand1 p {
/* include/redefine general settings, add some for brand1 */
}
#brand2 p {
/* include/redefine general settings, add some for brand2 */
}
为整个身体创建一个外部<div>，并使用JavaScript将其id切换为brand1，brand2等.通过这种方式，我无需编写CSS脚本，只需将一行JavaScript来显示所有元素的上下文.
Create an outer <div> for the whole body and switch its id with JavaScript to brand1, brand2, etc. This way I don't need to script CSS in any way, just switch the "context" of all elements with one line of JavaScript.
我是CSS初学者，所以我想避免犯完全错误的事情.请发表评论.
I'm a CSS beginner, so I'd like to avoid going for something totally wrong. Please comment.
推荐答案
我这样做:
<!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>
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;}
主题
现在，我们的工作将是确定可自定义的组件.在这里，使用基本布局，我们可以仅将无序列表的颜色和列表样式作为主题.首先让我们单独处理这些样式.作为初学者的教程，让我们只专注于前景色和背景色，而不要关注布局.
Theming
Now our work would be identifying the themable components. Here, with the base layout, we can theme only the colours and list styles of the unordered list. Lets get those styles alone first. Being a beginner's tutorial, lets concentrate only on the foreground and background colours and not layouts.
将第一类命名为.light，相同的CSS将是:
Lets name the first class as .light and the CSS for the same would be:
.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;}
JavaScript
现在要更改代码，我们需要添加三个链接或按钮来处理主题更改.因此，在HTML中，我们添加以下三个链接:
JavaScript
And now for the code to change, we need to add three links or buttons, which handle the theme change. So, in the HTML, let's add these three links:
<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;}
.wrap.themelinks h4 {margin: 0; padding: 10px;}
.wrap.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.wrap.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;
});
});
演示
您可以在 jsBin 中查看工作演示.
Demo
You can check out the working demo in jsBin.
这篇关于使用一个CSS选择网页外观而无需重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
