js實(shí)現(xiàn)單一html頁面兩套css切換代碼

更新時(shí)間：2013年04月11日 16:58:06 作者：

研究了一下JS的用setAttribute方法實(shí)現(xiàn)一個(gè)頁面兩份樣式表的效果與大家分享下，感興趣的朋友可以參考下哈，希望可以幫助到你

今天研究了一下JS的用setAttribute方法實(shí)現(xiàn)一個(gè)頁面兩份樣式表的效果，具體方法如下：
第一步：在連接樣式表的元素里定義一個(gè)id,例如

復(fù)制代碼代碼如下:

我定義的id是css。
第二步：寫一個(gè)js函數(shù)，代碼如下：

復(fù)制代碼代碼如下:

 
<script type=”text/javascript”> 
function change(a){ 
var css=document.getElementById(“css”); 
if (a==1) 
css.setAttribute(“href”,”1.css”); 
if (a==2) 
css.setAttribute(“href”,”2.css”); 
} 
</script> 

這個(gè)函數(shù)的code可以放在頁面的任何地方。
第三步：為改變頁面的樣式表的連接添加一個(gè)函數(shù)的觸發(fā)事件，代碼如下：

復(fù)制代碼代碼如下:

 
<a href=”#” onClick=”change(1)”>1.css</a> 
<a href=”#” onClick=”change(2)”>2.css</a> 

該效果在IE和FF下均測試通過，相信大家看完后因該非常明了，利用這個(gè)方法我們可以讓瀏覽者自己選擇需要顯示的樣式表，比如年老者可以選擇一個(gè)字體較大的樣式表。這里需要注意的兩點(diǎn)是：
在這個(gè)例子中函數(shù)名function后面的名字不能為links或者link，如果為links或者link，樣式表將不被改變，具體什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改變整個(gè)頁面的樣式，你需要在樣式表文件里定義body的高度為100%

方法二：
第一步：導(dǎo)入兩套css文件

復(fù)制代碼代碼如下:

 
<link rel="stylesheet" type="text/css" title="樣式A" href="css/people1.css" /> 
<link rel="alternate stylesheet" type="text/css" title="樣式B" href="css/people2.css" /> 

第二步：寫切換的js函數(shù)

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var title = "樣式A"; 
function setStyle(){ 

//只是樣式A 和樣式B切換 
if(title=="樣式A"){ 
title = "樣式B"; 
}else{ 
title = "樣式A"; 
} 

var i,links; 
//用dom方法獲取所有l(wèi)ink元素 
links = document.getElementsByTagName("link"); 
//判斷每個(gè)link元素中是否含有style字符串 ，用來判斷此link元素為樣式表link ，同時(shí)判斷此link是否包含title屬性 
for(i=0; links[i]; i++){ 
if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")){ 
//把所有l(wèi)ink設(shè)為disabled 
links[i].disabled = true; 
//再來判斷title中是否有指定的title字符串 有則把當(dāng)前的link設(shè)為可視 即激活當(dāng)前的link 
if(links[i].getAttribute("title").indexOf(title) != -1){ 
links[i].disabled = false; 
//alert("ok"); 
} 

} 
} 
} 
</script> 

第三步：在html標(biāo)簽中調(diào)用切換的js函數(shù)

復(fù)制代碼代碼如下:

 
<a href="#" onclick="setStyle();" >1</a> 
<a href="#" onclick="setStyle();">2</a> 
<a href="#" onclick="setStyle();">3</a> 
<a href="#" onclick="setStyle();">4</a> 
<a href="#" onclick="setStyle();">5</a> 

您可能感興趣的文章: