现在越来越多的网站都做到可以用户自己选择样色，其原理就是通过用户的选择来切换加载不同的样色表，当然你的页面必须是有比较好的框架、布局等等。下面就以一个比较简单的例子来说明是怎么实现的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="orange.css" type="text/css" title="orange" />
<script language="javascript" type="text/javascript" src="changecss.js"></script>
</head>
<body>
<div class="div-one">
<h1 style="margin:0;">NO. 1</h1>
</div>
<div class="div-two">
<h1 style="margin:0;">NO. 2</h1>
</div>
<div class="div-three">
<input type="button" value="change color" onclick="changeActiveStyleSheet()"/>
</div>
</body>
</html>
//changecss.js
function changeActiveStyleSheet(){
var i,a,href;
for(i=0;(a=document.getElementsByTagName('link')[i]);i++)
if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')){
if(a.href.indexOf('green')!=-1)
href = "orange";
else if(a.href.indexOf('orange')!=-1)
href = "green";
else
href = "orange";
a.href = href + ".css";
}
@charset "utf-8";
/* orange.css */
.div-one{
float:left;
width:200px;
height:200px;
opacity = 0.7;
background:orange;
text-align:center;
line-height:200px;
border:green 1px dashed;
filter:Alpha (opacity = 70);
}
.div-two{
float:left;
width:200px;
height:200px;
background:green;
text-align:center;
line-height:200px;
border: orange 1px dashed;
}
.div-three{
float:left;
width:200px;
height:200px;
text-align:center;
}
.div-three input{
margin:45% 0;
}
@charset "utf-8";
/* green.css */
.div-one{
float:left;
width:200px;
height:200px;
opacity = 0.7;
background:green;
text-align:center;
line-height:200px;
border: orange 1px dashed;
filter:Alpha (opacity = 70);
}
.div-two{
float:left;
width:200px;
height:200px;
background:orange;
text-align:center;
line-height:200px;
border:green 1px dashed;
}
.div-three{
float:left;
width:200px;
height:200px;
text-align:center;
}
.div-three input{
margin:45% 0;
}
分享到：
相关推荐
4. `css`文件夹：通常包含`.css`样式表文件，用于定义网页的布局、颜色、字体等视觉样式。在这个项目中，CSS将负责设置图片的大小、位置、过渡动画等，以实现动态切换的效果。 5. `images`文件夹：可能包含了更多的...
总的来说，"Orion - 切换颜色的响应导航条"项目涉及了现代Web开发的核心技术，包括HTML5的结构化元素、CSS3的响应式设计和动态效果，以及JavaScript的交互实现。这个组件可以帮助开发者快速创建具有专业外观和用户...
JavaScript动态生成CSS是一种常见的前端开发技术，它允许我们在运行时创建、修改或删除CSS样式，以实现更加灵活和动态的页面样式控制。这种方式通常用于响应式设计、动画效果、主题切换或者在某些特定条件下需要调整...
通过使用jQuery，我们可以轻松地实现动态切换不同的CSS样式表，从而改变网页的视觉效果。下面将详细讲解如何使用jQuery来实现这一功能。 首先，我们需要在HTML文档中引入jQuery库。通常，我们可以通过CDN链接或者...
这种技术通常涉及前端技术栈中的CSS（层叠样式表）和JavaScript（一种常用的脚本语言），通过它们来实现图片的无缝切换、动画效果以及交互功能。 #### 二、技术原理及实现方式 图片动态切换技术主要基于CSS和...
在样式表中，我们可以设置tab项的基本样式以及选中状态下的样式变化，使得在自动切换过程中能够给用户明确的反馈。例如，当某个tab项被选中时，改变其颜色、下边框或者其他视觉元素。 在JavaScript部分，首先我们要...
JavaScript特效在网页设计中扮演着重要的角色，它们可以为用户带来动态、交互式的体验，而五屏切换特效则是其中一种常见的展示方式。这种特效通常应用于网站的首页，以吸引用户的注意力，展示不同的内容板块，如产品...
JavaScript可以控制CSS的动画，例如通过修改`style`属性来实现文本颜色的渐变。这通常需要结合CSS的`transition`属性来实现平滑过渡效果。 最后，"15.31 JavaScript媞犰撇档緓暄嗾.htm"的名称有些模糊，但根据前缀...
在这个例子中，当用户点击“切换语言”按钮时，JavaScript会检查当前显示的语言，并切换到另一个语言版本的导航条。通过结合HTML、CSS和JavaScript，我们可以实现一个简单而有效的中英文双语切换导航条。 当然，...
3. **CSS样式**：为了实现视觉上的特效，CSS（层叠样式表）将被用来定义登录和注册框的布局、颜色、边框等样式。同时，CSS3的过渡和动画效果可以用来创建平滑的显示和隐藏动画。 4. **HTML结构**：HTML是页面的基础...
JavaScript动态换肤是一种常见的网页交互设计，允许用户根据个人喜好更改网站的主题颜色或风格。在提供的文件中，我们可以看到三个关键文件：`b.css`、`a.css`和`Index.html`。这些文件共同协作来实现这个功能。 ...
在网页设计中，CSS（层叠样式表）是一种强大的工具，用于定义HTML或XML文档的呈现方式，包括颜色、字体、布局以及响应式设计等。动态切换图片效果是CSS的一个重要应用，它可以让用户交互时或者根据特定条件改变图片...
在本主题中，“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果，即当用户交互时，网页背景颜色逐渐变为透明，并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性，常被...
1. 动态表格：使用JavaScript动态创建和修改表格，实现数据的增删改查。 2. 图片轮播：通过定时器和CSS动画，创建一个自动切换的图片展示效果。 3. 表单验证：利用JavaScript验证用户输入，确保数据格式正确。 4. 弹...
颜色表 ... JavaScript的特点： 简单、易学、易用； 跨平台；IE、Navigator 符合ECMA（欧洲计算机制造协会）标准，可移植； 事件驱动式的脚本程序设计思想； 动态、交互式的操作方式。 JavaScript的作用： ...
然后，通过JavaScript来切换这些样式表的引用，达到更换页面外观的效果。 1. **存储皮肤信息**：首先，你需要一个数据结构来存储皮肤的相关信息，这可以是JSON对象或者简单的数组，包括皮肤的名称、对应的CSS文件...
而jQuery Switcher 插件则是用于实现CSS样式表（style sheets）动态切换的一个实用工具。这个插件允许用户在页面加载后根据需求更换不同的样式表，从而提供更丰富的交互体验和视觉效果。 首先，我们要理解CSS样式表...
3. **添加JavaScript逻辑**：实现图片切换的动态控制，包括手动切换和自动播放。 4. **测试与优化**：在不同的浏览器和设备上测试效果，调整代码以确保兼容性和性能。 #### 结论 图片切换效果是现代网页设计中不可...
在IT领域，JavaScript是一种广泛使用的前端编程语言，它在网页交互和动态效果方面扮演着重要角色。本项目“基于JavaScript的图片播放器”利用JS的灵活性和强大的功能，实现了图片的动态展示，提供了丰富的视觉体验。...
"jQuery页面主题颜色自由切换"就是一个这样的实践，它允许用户根据个人喜好选择不同的页面主题颜色，从而增强用户的交互性和满意度。下面将详细探讨这个主题切换功能的核心技术和实现方法。 首先，jQuery是一个广泛...