<!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实现样式表的简单切换的更多相关文章

  1. JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

    层叠样式 表和动态HTML   层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准.     使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...

  2. javascript控制样式表(不常用)

    <html> <head> <title>Example XHTML page</title> <link href="css1.css ...

  3. 利用JavaScript来切换样式表

    切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  4. JavaScript访问修改css样式表

    1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...

  5. JavaScript对css样式表操作

    CSS样式表3种方式: 内嵌:写在html标签中的样式 :如:<p style="width:100px"> 内嵌</p> 内联:写在html 中<h ...

  6. CSS样式表初学，比C#和JS简单

    今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...

  7. JavaScript的DOM_StyleSheet操作内联或链接样式表

    使用 style 属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,使用 getComputedStyle 和cur ...

  8. 简单了解css3样式表写法和优先级

    css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  9. JavaScript编程：使用DOM操作样式表

    6.使用DOM操作样式表: 操纵元素的Style样式属性:         background-color:style.backgroundColor         color:style.col ...

随机推荐

  1. linux svn迁移备份的三种方法

    原文:http://www.iitshare.com/linux-svn-migration.html svn备份方式对比分析 一般采用三种方式: 1.svnadmin dump 2.svnadmin ...

  2. eclipse下编译hadoop源代码(转)

    hadoop是一个分布式存储和分布式计算的框架.在日常使用hadoop时,我们会发现hadoop不能完全满足我们的需要,我们可能需要修改hadoop的源代码并重新编译.打包. 下面将详细描述如何从sv ...

  3. python 判断内网IP方法及实例应用

    一.初衷: 一般在CMDB里会存储一台服务器的内网IP.管理IP.电信IP.联通IP,我们在使用的时候只需要拿到其中一个外网IP地址即可.那么我们就需要判断内网IP.管理IP并剔除掉,获取第一个外网I ...

  4. php命名空间学习

    在一个命名空间中,当 PHP 遇到一个非限定的类.函数或常量名称时,它使用不同的优先策略来解析该名称. 1.类名称总是解析到当前命名空间中的名称.因此在访问系统内部或不包含在命名空间中的类名称时,必须 ...

  5. [物理学与PDEs]第4章 反应流体力学

    [物理学与PDEs]第4章第1节 引言 [物理学与PDEs]第4章第2节 反应流体力学方程组 2.1 粘性热传导反应流体力学方程组 [物理学与PDEs]第4章第2节 反应流体力学方程组 2.2 反应流 ...

  6. ASCII码排序（未完）

    用指针数组 存放多个字符串 描述输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个字符.   输入 第一行输入一个数N,表示有N组测试数据.后面的N行输入多组数据,每组输入数据 ...

  7. JAVA 对象初始化的过程

    对象初始化的过程例:Student S    =    new Student();1.因为new Student()用到了Student类,所以会把它从硬盘上加载进入内存2.如果有static静态代 ...

  8. css针对（各大浏览器、各版本）调兼容

    ie6\ie7\firefox之下各自识别的CSS符号 #1 { color: #333; } /* firefox */ * html #1 { color: #666; } /* IE6 */ * ...

  9. android实现 服务器功能

    package com.weijia.tests; import java.io.IOException; import java.net.InetSocketAddress; import java ...

  10. arm-linux-gcc 常用参数讲解 gcc编译器使用方法

    我们需要编译出运行在ARM平台上的代码,所使用的交叉编译器为 arm-linux-gcc.下面将arm-linux-gcc编译工具的一些常用命令参数介绍给大家.在此之前首先介绍下编译器的工作过程,在使 ...