用js動(dòng)態(tài)改變css樣式表

          用setAttribute方法實(shí)現(xiàn)一個(gè)頁面兩份樣式表的效果,具體方法如下:

          第一步:在連接樣式表的元素里定義一個(gè)id,例如

          <link href="1.css" rel="stylesheet" type="text/css" id="css">

          我定義的id是css。

          第二步:寫一個(gè)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>

          這個(gè)函數(shù)的code可以放在頁面的任何地方。

          第三步:為改變頁面的樣式表的連接添加一個(gè)函數(shù)的觸發(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%


          還有一種方法:

          <script language="javascript">
          var b_v = navigator.appVersion;
          var IE6 = b_v.search(/MSIE 6/i) != -1;
          var IE7 = b_v.search(/MSIE 7/i) != -1;
          if (IE6) {
          document.write("<link href=""css/neiye_ie6.css"" rel=""stylesheet"" type=""text/css"" id=""cssStyle"" />");
          }else{
          document.write("<link href=""css/neiye.css"" rel=""stylesheet"" type=""text/css"" id=""cssStyle"" />");
          }
          </script>




          自動(dòng)化養(yǎng)雞設(shè)備

          posted on 2010-10-17 10:48 丁克設(shè)計(jì) 閱讀(13835) 評論(7)  編輯  收藏 所屬分類: JavaScript技術(shù)文檔CSS 技術(shù)文檔

          評論

          # re: 用js動(dòng)態(tài)改變css樣式表 2012-03-22 14:45 慕義

          非常好 thank you   回復(fù)  更多評論   

          # re: 用js動(dòng)態(tài)改變css樣式表 2013-01-21 12:58 剛剛給

          sfsdfssf  回復(fù)  更多評論   

          # re: 用js動(dòng)態(tài)改變css樣式表 2013-04-28 13:45 蝸牛網(wǎng)絡(luò)

          沒有找到我的答案,辛苦了  回復(fù)  更多評論   

          # re: 用js動(dòng)態(tài)改變css樣式表 2013-05-28 13:26 tshk

          修改后 不能事實(shí)生效 火狐測試  回復(fù)  更多評論   

          # re: 用js動(dòng)態(tài)改變css樣式表 2013-05-28 13:29 tshk

          可以實(shí)時(shí)生效 剛才寫錯(cuò)了 變量名字重復(fù)了 好用  回復(fù)  更多評論   

          # re: 用js動(dòng)態(tài)改變css樣式表 2013-12-04 21:20 d

          這只是改變外部引用的樣式吧
          使用Css有三種方法,樓主只說了一種  回復(fù)  更多評論   

          # re: 用js動(dòng)態(tài)改變css樣式表 2015-06-22 20:19 asdf

          ding  回復(fù)  更多評論   

          <2015年6月>
          31123456
          78910111213
          14151617181920
          21222324252627
          2829301234
          567891011

          導(dǎo)航

          留言簿(6)

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          主站蜘蛛池模板: 孝义市| 新平| 沁水县| 民乐县| 峨眉山市| 深泽县| 鹤庆县| 商水县| 合江县| 宁武县| 南京市| 泸西县| 宾阳县| 桦川县| 芒康县| 龙山县| 淮北市| 龙井市| 左贡县| 建湖县| 鄢陵县| 疏勒县| 闻喜县| 无为县| 南郑县| 襄垣县| 苏州市| 大渡口区| 沈阳市| 汉阴县| 彝良县| 大兴区| 张北县| 巴彦县| 阜新| 金秀| 和平县| 固镇县| 武陟县| 西盟| 沁阳市|