<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="alternate stylesheet" href="red.css" type="text/css" title="red" media="screen, projection"/>
<link rel="stylesheet" href="green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="yellow.css" type="text/css" title="yellow" media="screen, projection"/>
<script language="javascript">
function setActiveStyleSheet(title) {
var i, a, main;
if (title) {
for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {
a.disabled = true;
if(a.getAttribute('title') == title){
a.disabled = false;
}
}
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('title');
}
return null;
}
/*
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")
!= -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title)
a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style")
!= -1 && a.getAttribute("title") && !a.disabled)
return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName
("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+";
path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return
c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie :
getPreferredStyleSheet();
setActiveStyleSheet(title);*/
</script>
</HEAD>
<BODY>
<a href="javascript :void()" onClick="setActiveStyleSheet('red'); return false;" title="红色样式">红色样式</a>
<a href="javascript :void()" onClick="setActiveStyleSheet('green'); return false;" title="绿色样式">绿色样式</a>
<a href="javascript :void()" onClick="setActiveStyleSheet('yellow'); return false;" title="黄色样式">黄色样式</a>
<a href="javascript :void()" onClick="setActiveStyleSheet('none'); return false;" title="没有样式">没有样式</a>
</BODY>
</HTML>
分享到：
相关推荐
网站换肤功能是现代网页设计中的一个重要特性，它允许用户根据个人喜好选择不同的主题或颜色方案，提升用户体验。本文将详细介绍如何使用JavaScript和CSS来实现动态整站换肤的功能。 首先，我们需要理解JavaScript...
### .NET网站换肤设计原理详解 在网页设计与开发领域，网站换肤（或称为皮肤切换）是一项提升用户体验、增强网站个性化的重要功能。本文将深入探讨网站换肤的设计原理，特别是针对.NET平台下的实现方法，包括CSS...
本项目"jQuery实现网站换肤功能.zip"就是这样一个示例，通过结合HTML、CSS和JavaScript，实现了动态更换网站主题色的效果。 首先，我们从`index.html`文件开始。这是网站的主页面，通常包含HTML结构以及引用外部CSS...
### 网站换肤：理解Themes与Skins在网页设计中的应用 #### 知识点一：什么是网站换肤（Themes与Skins） 在网页设计领域，“网站换肤”通常指的是通过更改网站的主题（Themes）和皮肤（Skins）来实现网站界面的个性...
在网页设计中，提供用户友好的交互体验是至关重要的，其中一种常见的功能就是网站换肤。本教程将探讨如何利用JavaScript库jQuery实现这一特性。jQuery以其简洁的API和丰富的插件，使得动态改变网站样式变得相对简单...
### JavaScript + CSS 实现网站换肤功能详解 随着互联网技术的发展和用户体验需求的不断提高，网站换肤功能成为了许多网站提高用户粘性和个性化体验的重要手段之一。本文将详细解析如何使用JavaScript和CSS技术来...
网站换肤是现代网页设计中常见的一种功能，它允许用户根据个人喜好选择不同的主题或颜色方案，从而个性化自己的浏览体验。在"css+js实现网站换肤"的场景下，我们将探讨如何利用CSS（层叠样式表）和JavaScript来实现...
本教程将详细讲解如何使用jQuery实现一个带有Cookie功能的网站换肤功能，确保用户在下次访问时能记住他们所选择的主题颜色。 首先，我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了HTML...
网站换肤不仅提升了用户体验，还允许设计师自由地调整网站外观，满足不同用户群体的需求。 一、ASP.NET Themes 基础 Themes 是 ASP.NET 提供的一种方式，它允许我们将样式信息（如字体、颜色、布局等）封装在独立...
### ASP.NET 2.0中轻松实现网站换肤 #### 一、概述 在Web开发过程中，为了提高用户体验，很多网站提供了多种主题风格供用户选择。ASP.NET 2.0提供了一种简单的方法来实现这一功能，即通过使用**Themes**和**Skins*...
"更换布局"和"网站换肤"是模板引擎的两个重要应用，它们允许用户或管理员在不修改代码的情况下改变网站的整体外观。 1. **模板引擎**：模板引擎的核心是将预先设计好的模板与程序中的数据结合，生成最终的输出。...
本文将详细解析如何使用jQuery库来实现一个具有cookie支持的网站换肤功能，且默认设置为用户上一次选择的颜色。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在...
网站换肤，主题切换
"js网站换肤"是指利用JavaScript技术为网站提供多套主题或样式，让用户可以根据个人喜好自由切换，提升用户体验。下面将详细探讨这一主题。 一、JavaScript在网站换肤中的作用 JavaScript在网站换肤中主要负责以下...
js特效脚本含源码和说明jQuery实现网站换肤功能本资源系百度网盘分享地址
- CSS（层叠样式表）是控制网页样式的语言，网站换肤主要通过改变CSS文件来实现。通常，我们可以创建多个预设主题的CSS文件，然后在用户选择皮肤时动态加载相应的CSS。 2. **JavaScript与动态换肤**： - ...
在Web开发中，网站换肤功能是指允许用户根据个人喜好选择不同的样式表（CSS文件）来改变网站的视觉外观。jQuery是一个轻量级的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，使得在...