發表文章

目前顯示的是 8月, 2013的文章

jQuery - css - dynamic change style

圖片
最近工作上所開發的網頁系統,打算把切換介面風格的功能做上去,於是研究了一下如何動態改變CSS並且套用,發現還挺簡單的~ 只需要置換網頁所Link的CSS file即可 ,以下弄個實際範例,透過jQuery來操作: 首先我們建立一個簡單的網頁 <html> <head> <title>Sample</title> <link rel="stylesheet" type="text/css" href="style_1.css" class="pagestyle" id="style_1" /> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript"> </script> </head> <body> <div class="outborder" id="div_1"> <div class="inline">Sample text</div> </div> </body> </html> 這個網頁所使用的CSS file為 style_1.css ,其內容如下: /*  *  Style 1  */ body { text-align:center; } .outborder { padding:5px;  background:red ; } .inline { padding:5px;  color:black; font-size:40px; font-weight:bold;  background:yellow ; } 接下來我們建立第二種風格,檔案為 style_2.css