用js動態改變css樣式表

          用setAttribute方法實現一個頁面兩份樣式表的效果,具體方法如下:

          第一步:在連接樣式表的元素里定義一個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可以放在頁面的任何地方。

          第三步:為改變頁面的樣式表的連接添加一個函數的觸發事件,代碼如下:

          <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%


          還有一種方法:

          <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>




          自動化養雞設備

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

          評論

          # re: 用js動態改變css樣式表 2012-03-22 14:45 慕義

          非常好 thank you   回復  更多評論   

          # re: 用js動態改變css樣式表 2013-01-21 12:58 剛剛給

          sfsdfssf  回復  更多評論   

          # re: 用js動態改變css樣式表 2013-04-28 13:45 蝸牛網絡

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

          # re: 用js動態改變css樣式表 2013-05-28 13:26 tshk

          修改后 不能事實生效 火狐測試  回復  更多評論   

          # re: 用js動態改變css樣式表 2013-05-28 13:29 tshk

          可以實時生效 剛才寫錯了 變量名字重復了 好用  回復  更多評論   

          # re: 用js動態改變css樣式表 2013-12-04 21:20 d

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

          # re: 用js動態改變css樣式表 2015-06-22 20:19 asdf

          ding  回復  更多評論   

          <2025年5月>
          27282930123
          45678910
          11121314151617
          18192021222324
          25262728293031
          1234567

          導航

          留言簿(6)

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          主站蜘蛛池模板: 广安市| 儋州市| 额敏县| 永泰县| 米林县| 金平| 沧州市| 天祝| 平乐县| 乐至县| 韶山市| 宾川县| 佛冈县| 古蔺县| 苏州市| 紫阳县| 长寿区| 安新县| 广丰县| 五指山市| 文安县| 青岛市| 息烽县| 大埔区| 榆社县| 建湖县| 周口市| 察隅县| 定边县| 绵竹市| 昭觉县| 海口市| 随州市| 武穴市| 汤阴县| 古交市| 克拉玛依市| 漳州市| 德化县| 武安市| 凤山县|