我对CSS和JavaScript还比较陌生,想知道是否可以编写一个脚本来允许用户更改网站使用的样式表。
例如:如果你有一个绿色主题,其中所有都是绿色调。你该如何实现用户通过按下一个按钮将其更改为红色呢?
有没有人有任何想法如何做到这一点?
我对CSS和JavaScript还比较陌生,想知道是否可以编写一个脚本来允许用户更改网站使用的样式表。
例如:如果你有一个绿色主题,其中所有都是绿色调。你该如何实现用户通过按下一个按钮将其更改为红色呢?
有没有人有任何想法如何做到这一点?
您可以在链接标签上设置ID,并在运行时切换CSS。
HTML
<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />
JS
document.getElementById('buttonID').onclick = function () {
document.getElementById('theme_css').href = '../red.css';
};
快速演示:
$( "#datepicker" ).datepicker();
$('button').button().on('click', function () {
let linkHref = 'https://code.jquery.com/ui/1.11.4/themes/{THEME}/jquery-ui.css';
if ($('#swapTheme').prop('href').indexOf('pepper-grinder') >= 0) {
$('#swapTheme').prop('href', linkHref.replace('{THEME}', 'black-tie'));
} else {
$('#swapTheme').prop('href', linkHref.replace('{THEME}', 'pepper-grinder'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/pepper-grinder/jquery-ui.css" id="swapTheme" rel="stylesheet">
<div id="datepicker"></div>
<button style="padding: 5px 15px;"> Switch Theme </button>
假设你有一个绿白色的主题,其中绿色是主要颜色,白色作为补充。网站可能看起来像这样:
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid green;
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: green;
height: 50px;
color: white;
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: green;
background-color: white;
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: green;
color: white;
}
.footer-note {
color: green;
background-color: white;
padding: 3px 0;
display: block;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
因此,迁移到CSS变量的第一步是将主题颜色重构为变量--primary-color
和--secondary-color
。以下是更改后您的样式表的外观。
您可以通过将默认主题颜色设置为:root
元素样式声明来开始:
:root {
--primary-color: green;
--secondary-color: white;
}
var(--primary-color)
。因此,您的标志的样式可能如下所示:.header-logo {
...
background-color: var(--primary-color);
color: var(--secondary-color);
...
}
:root {
--primary-color: green;
--secondary-color: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
--primary-color
的值为“red”。而且,您可以使用Javascript来实现!使用普通JS,您可以使用以下方式设置颜色为红色:document.body.style.setProperty("--primary-color", "red");
或者,您可以使用jQuery:
$(document.body).css("--primary-color", "red");
$(document.body).css("--primary-color", "red");
:root {
--primary-color: green;
--secondary-color: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
background-color: #ddd;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
我更进一步创建了一些按钮,展示如何允许用户选择一组主题颜色,并使用jQuery更改CSS变量的值。
以下是下面代码片段在Chrome 64上的外观 - 如果您仍在使用不支持CSS变量的浏览器:
$(".header--theme-button").on("click", function() {
var primaryColor = $(this).css("--theme-primary");
var secondaryColor = $(this).css("--theme-secondary");
$(".header--theme-button").removeClass("active");
$(this).addClass("active");
$(document.body).css("--primary-color", primaryColor);
$(document.body).css("--secondary-color", secondaryColor);
});
:root {
--primary-color: orange;
--secondary-color: white;
--theme-primary: black;
--theme-secondary: white;
}
body {
font-family: "Segoe UI", "Serif", "Verdana", "Arial";
}
.container {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-rows: 50px 1fr 30px;
grid-gap: 5px;
}
.header {
grid-row: 1;
grid-column: 1 / 3;
}
.nav {
grid-column: 1;
grid-row: 2;
border-right: 1px solid var(--primary-color);
}
.content {
grid-column: 2;
grid-row: 2;
padding: 10px;
}
.footer {
grid-row: 3;
grid-column: 1 / 3;
text-align: center;
}
/* Child items. */
.header-logo {
float: left;
width: 100px;
background-color: var(--primary-color);
height: 50px;
color: var(--secondary-color);
font-size: 30px;
padding: 3px 5px;
box-sizing: border-box;
}
.header-settings {
float: right;
height: 50px;
}
.nav-links {
list-style: none;
margin: 5px 0 0 0;
padding: 0;
}
.nav-links--link {
color: var(--primary-color);
background-color: var(--secondary-color);
width: 100%;
height: 30px;
margin: 0 0 5px 0;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
}
.nav-links--link.active,
.nav-links--link:hover {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.footer-note {
color: var(--primary-color);
background-color: var(--secondary-color);
padding: 3px 0;
display: block;
}
.header--theme-button {
height: 30px;
width: 30px;
margin: 10px 5px 0 0;
display: inline-block;
border-top: 15px solid var(--theme-primary);
border-bottom: 15px solid var(--theme-secondary);
border-right: 0;
border-left: 0;
padding: 0;
box-shadow: 0 0 3px gray;
}
.header--theme-button:hover {
box-shadow: 2px 2px 2px gray;
}
.header--theme-button.active {
box-shadow: 3px 3px 3px gray;
}
<div class="container">
<div class="header">
<div class="header-logo">
LOGO
</div>
<div class="header-settings">
<button type="button" class="header--theme-button active" style="--theme-primary:orange; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#2196F3; --theme-secondary:#eee;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:purple; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#F44336; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:green; --theme-secondary:white;">
</button>
<button type="button" class="header--theme-button" style="--theme-primary:#FFEB3B; --theme-secondary:#222;">
</button>
</div>
</div>
<div class="nav">
<ul class="nav-links">
<li class="nav-links--link active">
Home
</li>
<li class="nav-links--link">
About
</li>
<li class="nav-links--link">
Contact Us
</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis id tenetur repudiandae deserunt, ipsam quisquam dicta tempora. Temporibus, vel, veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos odio id repellat quam, assumenda magnam! Beatae perferendis error exercitationem molestias explicabo earum ipsam maiores ullam natus dolorum, dolorem itaque reiciendis
nihil placeat incidunt aperiam tempora, commodi eveniet. Minima iusto porro iste quae dignissimos neque dolor adipisci non, soluta nisi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, dolorem blanditiis exercitationem excepturi, impedit iure.</p>
</div>
<div class="footer">
<span class="footer-note">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
是的,您可以使用JavaScript更改CSS。请参见此教程了解更多信息。它基本上像这样链接多个样式表:
<link rel="stylesheet" type="text/css" title="blue"
href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
href="http://example.com/css/pink.css">
然后使用JavaScript进行更改:
<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>
该教程中编写了switch_style()函数。
您甚至不需要任何Javascript:
input[type=radio][value=light]:checked ~ article {
color: #222;
background-color: #FFEEAA;
}
input[type=radio][value=dark]:checked ~ article {
color: #EEE;
background-color: grey;
}
<body>
<input type="radio" name="theme" value="light" checked="checked">Light<br>
<input type="radio" name="theme" value="dark">Dark<br>
<article>
<h1>My super page!</h1>
<p>
Quibusdam sit repudiandae consequuntur doloremque illum ut ex quo. Esse temporibus est id suscipit repellat. Distinctio voluptatem voluptates asperiores dolorem dolorem placeat corporis quae. Quaerat voluptatem magni dignissimos rerum distinctio odio id.
</p>
</article>
</body>
if (localStorage.getItem("theme") != "") {
loadcssfile(localStorage.getItem("theme"));
}
function loadcssfile(filename) {
if (filename != "") {
localStorage.setItem("theme", filename);
}
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
<div onclick="loadcssfile('css/pink.css')" id="pink">
Pink
</div>
<div
onclick="loadcssfile('css/blue.css')" id="blue">
Blue
</div>
link
的href
属性不会卸载已加载的 CSS 规则,对吗? - a55