高大上的動態CSS，高大動態CSS

高大上的動態CSS，高大動態CSS

項目裡要添加 custom css 功能 (dynamic stylesheet )，總結一下實現方法。

1。在JSP中動態設定檔案path

預先產生一些css檔案，由使用者選擇，在jsp被請求時，動態載入使用者選擇的css檔案。

xml 代碼

1. <link rel="STYLESHEET" type="text/css" href="css file" >   

<link href="動態設定樣式檔案" type="text/css" rel="STYLESHEET">

這種方法，網上講很多。

2。覆蓋CSS樣式

利用CSS的一個特點，即當有重名樣式時，新的樣式內容將覆蓋舊的，對使用樣式的元素來說，就是使用就近的樣式內容。

所以，我們可以在中引用一個預設的樣式檔案，然後，將客戶訂製的CSS樣式，動態輸出到JSP的

<link href="預設樣式檔案" type="text/css" rel="STYLESHEET">

xml 代碼

1. <link rel="STYLESHEET" type="text/css" href="default css file" >     
2. <style type="text/css">     
3. <!---->     
4. style>    

之中，這樣客戶訂製的css就會覆蓋預設樣式。

3。使用jsp來動態產生CSS

 將css樣式檔案，改名為.jsp，引用樣式檔案時，使用這個jsp檔案，就可以動態產生樣式了。mycss.jsp如下<!---->

xml 代碼

1. <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>      
2. <%      
3. request.setAttribute("baseColor", request.getParameter("baseColor"));      
4. request.setAttribute("color", request.getParameter("color"));      
5. %>      
6. .myColor {      
7.     color: <c:out value="${color}" default="#003399"/>;      
8.     <c:out value="${baseColor}" default="#cfddee"/>;      
9. }  

在jsp中引用

xml 代碼

1. <link rel="STYLESHEET" type="text/css" href="/mycss.jsp?baseColor=red&color=blue" >  

因為link標籤，不能把 request 也傳過去，所以要通過url傳參數，也可以通過session。