用JS實現一個頁面多個css樣式實現
更新時間：2008年05月29日 22:53:03 作者：
在Hello,Yang中看見的一篇文章，感覺很有用，轉來這里……
第一步：在連接樣式表的元素里定義一個id,例如
<link href="1.css" rel="stylesheet" type="text/css" id="css">，
我定義的id是css。
第二步：寫一個js函數，代碼如下：
<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>
這個函數的code可以放在頁面的任何地方。
第三步：為改變頁面的樣式表的連接添加一個函數的觸發(fā)事件，代碼如下：
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>
該效果在IE和FF下均測試通過，相信大家看完后因該非常明了，利用這個方法我們可以讓瀏覽者自己選擇需要顯示的樣式表，比如年老者可以選擇一個字體較大的樣式表。這里需要注意的兩點是：
一、在這個例子中函數名function后面的名字不能為links或者link，如果為links或者link，樣式表將不被改變，具體什么原因我也不大清楚，可能是javascript的保留字符。
二、另外如果是改變整個頁面的樣式，你需要在樣式表文件里定義body的高度為100%
復制代碼 代碼如下:
<link href="1.css" rel="stylesheet" type="text/css" id="css">，
我定義的id是css。
第二步：寫一個js函數，代碼如下：
復制代碼 代碼如下:
<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>
這個函數的code可以放在頁面的任何地方。
第三步：為改變頁面的樣式表的連接添加一個函數的觸發(fā)事件，代碼如下：
復制代碼 代碼如下:
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>
該效果在IE和FF下均測試通過，相信大家看完后因該非常明了，利用這個方法我們可以讓瀏覽者自己選擇需要顯示的樣式表，比如年老者可以選擇一個字體較大的樣式表。這里需要注意的兩點是：
一、在這個例子中函數名function后面的名字不能為links或者link，如果為links或者link，樣式表將不被改變，具體什么原因我也不大清楚，可能是javascript的保留字符。
二、另外如果是改變整個頁面的樣式，你需要在樣式表文件里定義body的高度為100%
相關文章
ES6為js新增了很多方法,包括遍歷、查詢、替換等等,下面這篇文章主要給大家介紹了關于ES6字符串和數值新增方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
最近項目經理我個項目練練手，其項目需求是要實現翻書效果，看到這個需求后，我真是懵了，這咋整，我可是java出身的啊，這個問題真是難住我了，后來有同事的指導，問題順利解決，下面小編把學習心得分享，感興趣的朋友可以參考下2016-06-06
自己寫了個JS+CSS的小東西，用來看提升用戶體驗的。 Name：WindowsTextShow；2008-12-12
這篇文章主要介紹了JavaScript實現拖動對話框效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
下面小編就為大家?guī)硪黄狫S區(qū)分Object與Aarry的六種方法總結。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
用javascript獲取當頁面上鼠標光標位置和觸發(fā)事件的對象的代碼
用 javascript 獲取當頁面上鼠標（光標）位置 和 觸發(fā)事件的對象 的方法2009-12-12
event.currentTarget與event.target的區(qū)別介紹
event.currentTarget與event.target的區(qū)別想大家在使用的時候不是很在意，本文以測試代碼來講解它門之間的不同2012-12-12
數組對象是使用單獨的變量名來存儲一系列的值，數組非常常用，數組是具有連續(xù)存儲位置的相似類型元素的同質集合。數組是用戶定義的數據類型。數組是一種數據結構,我們在其中存儲相似數據類型的元素2022-09-09
這篇文章主要為大家詳細介紹了js仿京東放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了javascript實現瀑布流的兩種布局方式，一是絕對式布局、二是列式布局，詳細介紹了這兩種布局方式的原理，本文重點介紹列式布局，感興趣的小伙伴們可以參考一下2016-01-01