用JS實(shí)現(xiàn)一個(gè)頁面多個(gè)css樣式實(shí)現(xiàn)

更新時(shí)間：2008年05月29日 22:53:03 作者：

在Hello,Yang中看見的一篇文章，感覺很有用，轉(zhuǎn)來這里……

第一步：在連接樣式表的元素里定義一個(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%

您可能感興趣的文章:

相關(guān)文章

ES6字符串和數(shù)值新增方法總結(jié)
ES6為js新增了很多方法,包括遍歷、查詢、替換等等,下面這篇文章主要給大家介紹了關(guān)于ES6字符串和數(shù)值新增方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
基于Turn.js 實(shí)現(xiàn)翻書效果實(shí)例解析
最近項(xiàng)目經(jīng)理我個(gè)項(xiàng)目練練手，其項(xiàng)目需求是要實(shí)現(xiàn)翻書效果，看到這個(gè)需求后，我真是懵了，這咋整，我可是java出身的啊，這個(gè)問題真是難住我了，后來有同事的指導(dǎo)，問題順利解決，下面小編把學(xué)習(xí)心得分享，感興趣的朋友可以參考下
2016-06-06
JS CSS文章查看系統(tǒng)
自己寫了個(gè)JS+CSS的小東西，用來看提升用戶體驗(yàn)的。 Name：WindowsTextShow；
2008-12-12
JavaScript實(shí)現(xiàn)拖動對話框效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)拖動對話框效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10
JS區(qū)分Object與Aarry的六種方法總結(jié)
下面小編就為大家?guī)硪黄狫S區(qū)分Object與Aarry的六種方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
用javascript獲取當(dāng)頁面上鼠標(biāo)光標(biāo)位置和觸發(fā)事件的對象的代碼
用 javascript 獲取當(dāng)頁面上鼠標(biāo)（光標(biāo)）位置和觸發(fā)事件的對象的方法
2009-12-12
event.currentTarget與event.target的區(qū)別介紹
event.currentTarget與event.target的區(qū)別想大家在使用的時(shí)候不是很在意，本文以測試代碼來講解它門之間的不同
2012-12-12
TypeScript數(shù)組的定義與使用詳解
數(shù)組對象是使用單獨(dú)的變量名來存儲一系列的值，數(shù)組非常常用，數(shù)組是具有連續(xù)存儲位置的相似類型元素的同質(zhì)集合。數(shù)組是用戶定義的數(shù)據(jù)類型。數(shù)組是一種數(shù)據(jù)結(jié)構(gòu),我們在其中存儲相似數(shù)據(jù)類型的元素
2022-09-09
js仿京東放大鏡效果
這篇文章主要為大家詳細(xì)介紹了js仿京東放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
詳解javascript實(shí)現(xiàn)瀑布流列式布局
這篇文章主要介紹了javascript實(shí)現(xiàn)瀑布流的兩種布局方式，一是絕對式布局、二是列式布局，詳細(xì)介紹了這兩種布局方式的原理，本文重點(diǎn)介紹列式布局，感興趣的小伙伴們可以參考一下
2016-01-01