用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 丁克設計 閱讀(13841) 評論(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  回復  更多評論   

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

          導航

          留言簿(6)

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          主站蜘蛛池模板: 巴东县| 泾阳县| 贵定县| 东乌| 光山县| 江都市| 剑河县| 体育| 开鲁县| 方山县| 南陵县| 镶黄旗| 珲春市| 右玉县| 伊金霍洛旗| 望谟县| 丹寨县| 休宁县| 融水| 景东| 陈巴尔虎旗| 荆门市| 锡林浩特市| 广灵县| 新竹县| 乐平市| 禄丰县| 泗水县| 衢州市| 南华县| 镇赉县| 屯昌县| 溧水县| 竹山县| 清镇市| 大洼县| 东海县| 广饶县| 竹溪县| 桂平市| 延长县|