用JS實現(xiàn)一個頁面多個css樣式實現(xiàn)
更新時間：2008年05月29日 22:53:03 作者：
在Hello,Yang中看見的一篇文章，感覺很有用，轉(zhuǎn)來這里……
第一步：在連接樣式表的元素里定義一個id,例如
<link href="1.css" rel="stylesheet" type="text/css" id="css">，
我定義的id是css。
第二步：寫一個js函數(shù)，代碼如下：
<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>
這個函數(shù)的code可以放在頁面的任何地方。
第三步：為改變頁面的樣式表的連接添加一個函數(shù)的觸發(fā)事件，代碼如下：
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>
該效果在IE和FF下均測試通過，相信大家看完后因該非常明了，利用這個方法我們可以讓瀏覽者自己選擇需要顯示的樣式表，比如年老者可以選擇一個字體較大的樣式表。這里需要注意的兩點是：
一、在這個例子中函數(shù)名function后面的名字不能為links或者link，如果為links或者link，樣式表將不被改變，具體什么原因我也不大清楚，可能是javascript的保留字符。
二、另外如果是改變整個頁面的樣式，你需要在樣式表文件里定義body的高度為100%
復(fù)制代碼 代碼如下:
<link href="1.css" rel="stylesheet" type="text/css" id="css">，
我定義的id是css。
第二步：寫一個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>
這個函數(shù)的code可以放在頁面的任何地方。
第三步：為改變頁面的樣式表的連接添加一個函數(shù)的觸發(fā)事件，代碼如下：
復(fù)制代碼 代碼如下:
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>
該效果在IE和FF下均測試通過，相信大家看完后因該非常明了，利用這個方法我們可以讓瀏覽者自己選擇需要顯示的樣式表，比如年老者可以選擇一個字體較大的樣式表。這里需要注意的兩點是：
一、在這個例子中函數(shù)名function后面的名字不能為links或者link，如果為links或者link，樣式表將不被改變，具體什么原因我也不大清楚，可能是javascript的保留字符。
二、另外如果是改變整個頁面的樣式，你需要在樣式表文件里定義body的高度為100%
您可能感興趣的文章:
相關(guān)文章
js構(gòu)造函數(shù)constructor和原型prototype原理與用法實例分析
這篇文章主要介紹了js構(gòu)造函數(shù)constructor和原型prototype原理與用法,結(jié)合實例形式分析js構(gòu)造函數(shù)constructor和原型prototype基本原理、功能、使用方法及操作注意事項,需要的朋友可以參考下2020-03-03
Ajax 文件上傳進度監(jiān)聽之upload.onprogress案例詳解
這篇文章主要介紹了Ajax 文件上傳進度監(jiān)聽之upload.onprogress案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
js判斷鼠標(biāo)同時離開兩個div想了好長時間終于出爐了，下面與大家分享下具體的實現(xiàn)代碼，感興趣的朋友可以參考下啊2013-05-05
本文主要分享了canvas繪制表盤時鐘的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
本文主要介紹了js中的循環(huán)方式及各種遍歷的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了javascript實現(xiàn)前端成語點擊驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
下面是js中截取字符串經(jīng)常會用到的一些函數(shù)，這里每個函數(shù)都給出了例子，學(xué)習(xí)的朋友可以參考下。2010-09-09
這篇文章主要介紹了JavaScript交換兩個變量方法實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
隨機展示小頭像，隨機數(shù)包括 位置、層級、大小、透明度 等2011-12-12
js調(diào)試工具console.log()方法查看js代碼的執(zhí)行情況
以往都是使用alert的方式查看js代碼的執(zhí)行情況，今天看到有朋友使用console.log函數(shù)打印輸出函數(shù),變量,對象,下邊就console.log的使用情況進行記錄2014-08-08