zoukankan      html  css  js  c++  java
  • 高大上的动态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。

  • 相关阅读:
    Vue 项目中 ESlint 配置
    ajax、axios、fetch 对比
    vue 中 axios 使用
    NodeJS 多版本管理(NVM)
    axio 请求中参数是数组
    Python 图片文字识别
    .NET 使用 VLC 播放视频
    Python 常见问题
    SpringBoot(4) SpringBoot热部署
    SpringBoot(3) 文件上传和访问
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/4123141.html
Copyright © 2011-2022 走看看