JavaScript实现样式表的简单切换
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#ulList
{
height:18px;
width:120px;
padding-left:380px;
padding-top:66px;
}
#ulList li
{
list-style-type:none;
display:inline-block;
height:18px;
width:30px;
text-align:center;
}
#div1
{
width:500px;
height:100px;
border:1px solid #000000;
margin:0 auto;
}
</style>
<link href="#" rel="stylesheet" id="csslink" />
<script type="text/javascript">
var data = [
{ cid: "1", color: "blue", cssPath: "css\\blue.css" },
{ cid: "2", color: "red", cssPath: "css\\red.css" },
{ cid: "3", color: "yellow", cssPath: "css\\yellow.css" },
{ cid: "4", color: "green", cssPath: "css\\green.css" }]; var ulList; window.onload=function()
{
ulList = document.getElementById("ulList"); for(var i=0;i<ulList.children.length;i++)
{
//给li设置属性cid
ulList.children[i].setAttribute("cid", data[i].cid);
//通过cid设置li的背景色
ulList.children[i].style.backgroundColor = setColor(ulList.children[i].getAttribute("cid"));
//通过cid获取cssPath
ulList.children[i].onclick =function()
{
var csslink = document.getElementById("csslink");
csslink.href = liClick(this.getAttribute("cid"));
// csslink.href = "css/" + this.style.backgroundColor + ".css";
}
}
} //通过cid获取颜色
function setColor(cid)
{
for(var j=0;j<data.length;j++)
{
if(data[j].cid==cid)
{
return data[j].color;
}
}
} //点击li更换div背景色
function liClick(cid)
{
for (var j = 0; j < data.length; j++)
{
if (data[j].cid == cid)
{
return data[j].cssPath;
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="ulList">
<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
</div>
</body>
</html>
效果图如下：点击其中任意颜色，div的背景色也随着改变，JS基础~~~权当练练手~~~
JavaScript实现样式表的简单切换的更多相关文章
- JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)
层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...
- javascript控制样式表(不常用)
<html> <head> <title>Example XHTML page</title> <link href="css1.css ...
- 利用JavaScript来切换样式表
切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- JavaScript访问修改css样式表
1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...
- JavaScript对css样式表操作
CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...
- CSS样式表初学，比C#和JS简单
今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...
- JavaScript的DOM_StyleSheet操作内联或链接样式表
使用 style 属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,使用 getComputedStyle 和cur ...
- 简单了解css3样式表写法和优先级
css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- JavaScript编程：使用DOM操作样式表
6.使用DOM操作样式表: 操纵元素的Style样式属性: background-color:style.backgroundColor color:style.col ...
随机推荐
- win7下vs2008编译出现C1859错误的处理办法
昨天,电脑上安装的vs2008 sp1版本编译工程时候出了这样的错了:fatal error C1859: 'Debug\**.pch'.清理并重新编译会临时解决问题,但问题仍然会频发.后面上网找资料 ...
- PUA
约会技巧 kino技巧 被拒绝的应对方法 (1)一般约会7个小时后,就能带女生回家 (2)点菜时多点一点,以回家放菜为名 (3)理由要文雅 (4)开酒店的理由 第一时间触碰测试 (1)第一次约会要第一 ...
- ubuntu修改grub界面默认开机顺序
终端输入: sudo gedit /etc/default/grub GRUB_DEFAULT代表的就是启动项的顺序,从数字0开始 修改成默认的第几个,就赋值成几就好(顺序从数字0开始) 然后别忘了运 ...
- 学习“要件审判九步法”，正确处理五个关系 z
学习“要件审判九步法”,正确处理五个关系 2015-06-29 07:39:07 | 来源:人民法院报第二版 | 作者:阮丹军 “要件审判九步法”,是邹碧华法官总结审判和审判管理双重经验后的心血之作, ...
- Gatling的进阶三
1. checks check是Gatling非常重要的一个特性,用来判断是场景否真的执行成功了 .exec(http("request_1") .get(&quo ...
- 查看MySQL的错误日志的方法
我们经常在运行MySQL时会出一些错误,也经常被这些错误搞得晕头转向.当然解决这些问题的首要任务是找到日志信息. MySQL的错误信息是在data目录下的,且文件名为<hostname>. ...
- nvl
NVL是Oracle PL/SQL中的一个函数.它的格式是NVL( string1, replace_with).它的功能是如果string1为NULL,则NVL函数返回replace_with的值, ...
- SQL 锁的介绍
锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 丢失更新A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 脏 ...
- Ulipad和有道词典冲突的问题
Ulipad和目前版本的有道词典有冲突,表现为先开有道词典,Ulipad就无法运行. 解决方法是:找到Ulipad安装目录下的config.ini,添加以下两行: [server] port=50 ...
- bootstrap 中是通过写less文件来生成css文件，用什么工具来编写呢？
bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...