Home > Developer > Web Develop
Query instance CSS style sheet dynamic selection
This example is mainly about the jquery selector,
Some knowledge of the jquery CSS
with similar
$ ("li"). CSS ("cursor", "pointer");
Such a way to determine
Specific people look at the code
It
CSS style sheet One
Body{background: #000;
Color: #fff}
h1{font-size:14px;
Color: #fff; font-weight:bold;}
p{font-size:12px;
Color: #fff;}
CSS style sheet Two
body{background: #f00; color: #fff}
H1{font-size:15px;color: #fff; font-weight:bold;}
P{font-size:13px;color: #fff;}
CSS style sheet Three
Body{background: #fee; color: #000}
H1{font-size:16px;color: #000; font-weight:bold;}
P{font-size:14px;color: #000;}
Main file code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<HTML>
<HEAD>
<TITLE>CSS selection </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>
<p>jquery is a simple and fast JavaScript library that allows you to easily manipulate documents, handle events, run animations, or add Ajax interactions on your Web pages. The design of jquery will change the way you write JavaScript code.
jquery is suitable for designers, developers, and those who are good for business development, and it can be said that jquery is suitable for any JavaScript application and can be used in unused applications.
jquery is a lightweight script with very small code and only about 15K of JavaScript packages.
jquery supports css1-css3,2881064151 and basic XPath
jquery is cross-browser and it supports browsers including 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>
Some knowledge of the jquery CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
