Query实例CSS 样式表动态选择
本实例主要说的还是jquery的选择器，
关于jquery的css的一些知识
用类似

$("li").css("cursor","pointer");

这样的方式来确定
具体的大家就看代码
吧

css样式表一

body{background:#000;
color:#fff}
h1{font-size:14px;
color:#fff;font-weight:bold;}
p{font-size:12px;
color:#fff;}

css样式表二

body{background:#f00;color:#fff}
h1{font-size:15px;color:#fff;font-weight:bold;}
p{font-size:13px;color:#fff;}

css样式表三

body{background:#fee;color:#000}
h1{font-size:16px;color:#000;font-weight:bold;}
p{font-size:14px;color:#000;}

主要文件代码

<!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"  xml:lang="utf-8">
<HTML>
<HEAD>
  <TITLE>css 选择</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
  <link href="1.css" rel="stylesheet" title="style1" type="text/css" />
  <link href="2.css" rel="stylesheet" title="style2" type="text/css" />
  <link href="3.css" rel="stylesheet" title="style3" type="text/css" />
</HEAD>
<BODY>
  <h1>jQuery 是一个新型的JavaScript库. </h1>
  <p>jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。
jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。
jQuery支持CSS1-CSS3,2881064151以及基本的xPath
jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
</p>
<ul>
<li rel="style1" class="styleswitch">styles1</li>
<li rel="style2" class="styleswitch">styles2</li>
<li rel="style3" class="styleswitch">styles3</li>
</ul>
<SCRIPT LANGUAGE="JavaScript">
<!--
$('.styleswitch').css("cursor","pointer");
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
function switchStylestyle(styleName)
{
$('link[@rel*=style][@title]').each(function(i) 
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
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 var 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;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
//-->
</SCRIPT>
</BODY>
</HTML>

关于jquery的css的一些知识的更多相关文章

  1. jQuery和CSS 3定制HTML 5视频播放器

    目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是 很值得开发者和用户关注的.现在,只需要有支持HTML5的浏览 ...

  2. jquery-8 jquery如何处理css样式

    jquery-8  jquery如何处理css样式 一.总结 一句话总结: 1.如何获取网页的三个高? 1)可视区域的高$(window).height(); 2)文档总高度$(document).h ...

  3. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  4. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  5. jQuery属性/CSS使用例子

    jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...

  6. jquery的css详解（二）

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  7. jquery的css详解（一）

    通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...

  8. jquery修改css样式，样式带!important

    由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...

  9. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

随机推荐

  1. [Bayes ML] This is Bayesian Machine Learning

    From: http://www.cnblogs.com/bayesianML/p/6377588.html#central_problem You can do it: Dirichlet Proc ...

  2. sql 理解

    select b.*,  b.model_ent_name+cast(m.year as varchar)as modelname, m.index_value as val into #tb fro ...

  3. Dubbo -- 系统学习 笔记 -- 示例 -- 多版本

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 多版本 当一个接口实现,出现不兼容升级时,可以用版本号过渡,版本号不同的服务相互间 ...

  4. 简单的面向过程的Redis存储加入购物车

    群里有人问这个Redis存储用户购物车信息,我简单的写了个面向过程的demo 代码如下: <?php $user_id=session("user_id");//获取用户登录 ...

  5. shell中判断是否是月末的方法

    判断今天是不是一月的最后一天: 如果$(TZ=IST-32 date +%d)是1就是月末了.

  6. N76E003之串口

    N76E003包含两个具备增强的自动地址识别和帧错误检测功能的全双工串口.由于两个串口的控制位是一样的,为了区分两个串口控制位,串口1的控制位以“_1”结尾(例如SCON_1).下述详例以串口0为例. ...

  7. Java单播、广播、多播(组播)

    一.通信方式分类 在当前的网络通信中有三种通信模式:单播.广播和多播(组播),其中多播出现时间最晚,同时具备单播和广播的优点. 单播:单台主机与单台主机之间的通信 广播:当台主机与网络中的所有主机通信 ...

  8. 《转》Python学习(13)-Python的字符编码

    转自 http://www.cnblogs.com/BeginMan/p/3166363.html 一.字符编码中ASCII.Unicode和UTF-8的区别 点击阅读:http://www.cnbl ...

  9. vue经验 - 那些自己给自己挖的深坑

    深坑场景:vue-异步请求数据,数据还没回来,页面却如饥似渴的准备好了的尴尬场景:问题原因和解决如下: 1.先说vuex中的store,一开始我为了偷懒是这么设置的,如下图: 然后我到了组件中直接这么 ...

  10. 百度编辑器（UEditor）自定义工具栏

    百度编辑器(UEditor)自定义工具栏的自定义 百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档! 百度编辑器默认配置展示界面 如何 ...