项目里要添加 custom css 功能 (dynamic stylesheet ),总结一下实现方法。
1。在JSP中动态设定文件path
预先生成一些css文件,由用户选择,在jsp被请求时,动态加载用户选择的css文件。
xml 代码
- <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 代码
- <link rel="STYLESHEET" type="text/css" href="default css file" >
- <style type="text/css">
-
- style>
之中,这样客户订制的css就会覆盖默认样式。
3。使用jsp来动态生成CSS
将css样式文件,改名为.jsp,引用样式文件时,使用这个jsp文件,就可以动态生成样式了。mycss.jsp如下<!---->
xml 代码
- <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
- <%
- request.setAttribute("baseColor", request.getParameter("baseColor"));
- request.setAttribute("color", request.getParameter("color"));
- %>
- .myColor {
- color: <c:out value="${color}" default="#003399"/>;
- background-color: <c:out value="${baseColor}" default="#cfddee"/>;
- }
在jsp中引用
xml 代码
- <link rel="STYLESHEET" type="text/css" href="/mycss.jsp?baseColor=red&color=blue" >
因为link标签,不能把 request 也传过去,所以要通过url传参数,也可以通过session。
分享到:
相关推荐
这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及...相信这个伪类选择符在将来会是一个很强大的一个工具。 动态css进度条代码效果图一: 点击查看演示 动态css进度条代码效果图二:
MoveCSS是一款专为现代网页设计而打造的动态CSS动画库,它提供了丰富多样的动画效果,让网页设计更加生动和引人入胜。通过MoveCSS,开发者可以轻松实现复杂的动画效果,如弹性过渡、3D转换、粒子效果等,无需编写...
wp-dynamic-css, WordPress的动态CSS编译器 动态 CSS 从动态内容生成 static 样式表的库,用于WordPress主题和插件。贡献者: ykadosh标签: 主题,插件,动态,动态,css,样式表测试: 4.7稳定标记: 1.0.5需要: ...
Flex动态CSS,设定整个application的CSS样式
javascript实现动态CSS换肤技术的脚本.docx
这是一款使用grid.js和css3 transition属性制作的仿google trends动态css3网格响应式布局。通过这款css3网格布局,用户可以选择屏幕上有多少个网格,并通过css3 transition制作出网格动画效果。
动态CSS 用于创建动态 css 样式和动画的 jquery 插件 用法 使用 .css 函数进行简单查询 $('#container').children().filter('div').css( { transform : 'translate(0%,0%) scale(.5,.5)', transition : 'all ....
html5 css3人物头像提示框动画显示特效
css动态的进度条,今天刚封装的!
动态加载Css 浏览器判断 Browes 浏览器判断
JavaScript动态生成css,JavaScript动态生成cssJavaScript动态生成css
动态添加css或js链接
javascript实现动态CSS换肤技术的脚本
CSS动态滑动菜单CSS动态滑动菜单CSS动态滑动菜单CSS动态滑动菜单CSS动态滑动菜单CSS动态滑动菜单CSS动态滑动菜单
[1] Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内...
流浪汉风格您网页的动态CSS !!!如何使用? 假设您正在使用 : npm install hobostyle 然后 var hobostyle = require ( 'hobostyle' ) ; var mystyle = hobostyle . style ( 'body { background-color: blue; }' )...
CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&javascript动态网页设计与制作CSS&...
这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出。相信这个伪类选择符在将来会是一个很强大的一个工具。 动态css进度条代码效果图一: 点击查看演示
html/css/javascript 使用 html、动态 css、javascript 和 jquery 创建动态大小、旋转的 html 画布 要了解以下所有内容,建议您访问上显示的页面。在那里,将鼠标悬停在弧段上并注意行为(以及弹出面板的样式等)。...
纯CSS3发光油灯笼动画特效是一款css3基于animation属性绘制卡通复古的油灯笼,点亮发光动画特效。