& 安装AsseticBundle 在symfony2.8以上默认没有安装Assetic这个静态资源管理工具，需要通过composer来安装。 cd到项目根目录，执行: composer require symfony/assetic-bundle 然后在app/AppKernel.php注册AsseticBundle： $bundles = array(
new Symfony\Bundle\AsseticBundle\AsseticBundle(),
); 最后在app/config/config.yml中添加如下信息： assetic:
&%kernel.debug%&
use_controller: false
cssrewrite: ~ 如果没有安装Assetic，就在twig中使用Assetic的语法，会提示未知tag
& 为Twig引入css/js/image 1.引入一个目录下所有的css： {% block stylesheets %}
stylesheets
'bundles/bossindex/css/*'
&link ref=&stylesheet& href=&{{ asset_url }}& &
{% endstylesheets %}
{% endblock %} 上面的会将web/bundles/bossindex/css/下所有的文件以&link ref=”stylesheet” href=”{{ asset_url }}” &的形式循环写入html文件中。 & 2.引入某些css文件 {% block stylesheets %}
stylesheets
'bundles/bossindex/css/amazeui.min.css'
'bundles/bossindex/css/admin.css'
filter='cssrewrite' %}
&link ref=&stylesheet& href=&{{ asset_url }}& &
{% endstylesheets %}
{% endblock %} 上面是一种写法，推荐使用这种写法，这种写法可以保证cssrewrite成功执行。也可以使用@bossIndexBundle的方式（但这种方式无法使用cssrewrite）： {% block stylesheets %}
stylesheets
'@bossIndexBundle/Resources/public/css/amazeui.min.css'
'@bossIndexBundle/Resources/public/css/admin.css'
&link ref=&stylesheet& href=&{{ asset_url }}& &
{% endstylesheets %}
{% endblock %} & 3.最直接的方式： {% block stylesheets %}
&link ref=&stylesheet& href=&{{ asset('@bossIndexBundle/Resources/public/css/amazeui.min.css') }}& &
&link ref=&stylesheet& href=&{{ asset('bundles/bossindex/css/admin.css') }}& &
{% endblock %} 这种写法适合使用在引入image的时候使用。 注意点：
1. css、js、image等资源文件最好放在所在Bundle的Resources/public下。当然也可以放在/web/bundles下。 2. 可以使用终端命令 php app/console assetic:dump 查看当前assetic管理的资源文件 3. 当将资源放在对应Bundle下后，如果在页面没有加载资源文件，可能需要手动将资源文件安装到web/bundles，执行：php app/console assets:install web
& 引入js和image的方式和上面差不多，简单示例： {% block javascripts %}
{% javascripts
'@bossIndexBundle/Resources/public/js/amazeui.ie8polyfill.min.js'
'@bossIndexBundle/Resources/public/js/amazeui.min.js'
'@bossIndexBundle/Resources/public/js/app.js'
&script src=&{{ asset_url }}&&&/script&
{% endjavascripts %}
{% endblock %} 引入图片： {% block image_ico %}
&link rel=&icon& type=&image/png& href=&{{ asset('bundles/bossindex/i/favicon.png') }}& &
&link rel=&apple-touch-icon-precomposed& href=&{{ asset('bundles/bossindex/i/app-icon72x72@2x.png') }}&&
{% endblock %} & 参考： /docs/cookbook/assetic/asset_management.htmljs css样式操作代码（批量操作）
字体：[ ] 类型：转载 时间：
用js控制css样式，能让网页达到良好的的用户体验甚至是动画的效果。并且考虑到效率。
我们用js书写css样式通常会用下面的两种方式： 一般情况下我们用js设置元素对象的样式会使用这样的形式：
代码如下:var element= document.getElementById(”id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”; 但是上面的方法有一个缺点，样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。 js中有一个cssText的方法： 语法为：obj.style.cssText(”样式”)； 上面的代码我们可以修改成：
代码如下:element.style.cssText=”width:20height:20border:solid 1”; 这种写法可以尽量避免页面的多次reflow，提高页面性能。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具如何用JavaScript实现动态修改CSS样式表
投稿：jingxian
字体：[ ] 类型：转载 时间：
如何用JavaScript实现动态修改CSS样式表？下面小编就为大家带来一篇JavaScript实现动态修改CSS样式表的方法。希望对大家有所帮助。一起跟随小编过来看看吧
看过我写的之后，你就很容易想明白如何修改CSS样式表了。
正好今天在论坛碰到一位朋友问这样的一个问题：
.ls{width=120}
//在这里加一句来改变.ls中width的值，如何写
有的朋友回答：“如果使用.ls的对象很多的话，用JS确实不方便, jquery方便,$(".ls").width(200);这样就行”。
他是想用JQ的类选择器.ls选择所有使用这个样式的对象，对它们逐个进行调整，而非更改CSS样式表，所以会有“对象很多”的顾虑。
但问题是，这只是改了那些对象的具体表现样式，而并非改了.LS的设置。如果再出现一个使用.LS风格的元素，它还是老样子，你还需要对这个元素再去调整，治标不治本。而且这种方式也决定了不可能简单地通过一句话就实现。
这样想的人还不少，而如果你看了这篇文章之后，相信你很容易就想到如何用一句话来解决这个问题，既简洁高效（浏览器会自动重新设置所有应用这个样式的元素），而且真正的修改了样式设置，新增的使用这个样式的元素将自动应用被修改过的设置。于是，你已经学到了和很多人区分开来的更高阶的知识。下面我把方法具体再说一下：
由于上面的例子，不容易看出效果，我下面另外写了个例子，通过颜色的改变，比较容易看到效果：
.theforever {width:50color:}
#theforever {width:150color:}
&div class="theforever"&这里应该是红色的，但它会被下面的JS通过改变CSS样式设置而变成黄色&/div&
&div id="theforever"&这里应该是银灰色的，的确这个不会发生变化，只作为对比&/div&
document.styleSheets[0].cssText=document.styleSheets[0].cssText.replace(/red/g,"yellow");
//一句，不就OK了？
上面的例子，针对的不是某个特定的样式名称，而是泛泛的颜色（如果你直接挪到含有更为复杂的CSS页面里，其中有不表示颜色的RED字样，这还会导致错误。我对不动脑子的代码拿来主义者一向极其反感，不作过多指示），但如果想要针对特定的样式名称进行更改，同样很容易：
从上面，可以看出document.styleSheets[0].cssText就是整个&STYLE&&/STYLE&内部的内容，相当于一个字串变量，所以假如针对.LS要改变它的设置，只需要把“.ls{width=120}”作为 replace 要替换的部分，把“.ls{width=555}”作为替换目标，这样就行了。
以上这篇如何用JavaScript实现动态修改CSS样式表就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具如何实现JavaScript动态加载CSS和JS文件
投稿：lijiao
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JavaScript动态加载CSS和JS文件，需要的朋友可以参考下
项目中需要用到动态加载CSS 文件，整理了一下，顺便融合了动态加载JS 的功能写成了一个对象，先上代码：
var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href =
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src =
script.type = 'text/javascript';
head.appendChild(script);
对象包含两个完全独立的方法，分别用来加载CSS 文件和JS 文件，参数均为欲加载的文件路径。原理非常的简单：对于不同的加载文件类型创建不同的节点，然后添加各自的属性，最后扔到head 标签里面。经测试，本方法兼容各浏览器，安全、无毒、环保，是 web 开发人员工作常备代码。
下面是调用代码，异常简单：
//动态加载 CSS 文件
dynamicLoading.css("test.css");
//动态加载 JS 文件
dynamicLoading.js("test.js");
以上就是告诉大家如何实现JavaScript动态加载CSS和JS文件，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具