当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 把JS与CSS写在同一个文件里的书写方法

Javascript
如何用js控制css中的float的代码
Autocomplete Textbox Example javascript实现自动完成成功
FormValid0.5版本发布,带ajax自定义验证例子
wordpress之js库集合研究介绍
推荐发几个常用控件(新加DHTML控件)
7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)
javascript下阻止表单重复提交、防刷新、防后退
javascript下计数器每秒自动加1
给所有的超级练级都加上onmousemove时间的js代码
js实现运行代码需要刷新的解决方法
兼容FF/IE跟随鼠标的层的效果
用javascript获得css中的属性值的代码
用javascript实现页内搜索的脚本代码
用javascript 控制表格行的展开和隐藏的代码
用javascript实现隐藏状态栏的代码
Code: write(s,d) 输出连续字符串
javascript创建页面蒙板的一些知识技巧总结
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
用javascript判断输入数据是否货币并自动添加¥符号的代码
js类中获取外部函数名的方法

Javascript 中的 把JS与CSS写在同一个文件里的书写方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 73 ::
收藏到网摘: n/a

我们经常把多个CSS或者多个JS并成一个,以节省请求,但是这样最少还是要两个。在MSDN的Blog上看到原来也是可以把JS和CSS并在一个文件里,那怎样做呢?利用注释,先看一下这代码。
<!-- /*
window.onload=function(){
document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我,那<strong>JS</strong>也生效了";
}
<!-- */
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}
CSS处理时会忽视掉<!--,这时JS部分只是CSS的注释/* js */,而JS处理时把<!--转成// 也就是JS的单行注释,单行注释会把后面的/*和*/干掉,同时也干掉了CSS,不废话了,看演示的例子。
在网上运行时还要通过程序输出个“*/*”的头,不然MIME不对有的浏览器不干活。PHP的是这样:
<?header('Content-type: */*');?>
理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通,不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种,虽然文件大了一点,但能少了一半的请求数,帅帅滴
当然,这样的格式写起来一定很不爽,不过配合程序来读原来已经的,并处理一下就可以,这样就可以保持原来文件也方便维护,输出文件又省点请求,如果想的话,处理处理缓存,跟静态文件差不多了。这里有份C#的,据说是官方滴,我的是PHP的,因为还没写缓存的机制就不拿出来丢人了,其实原理也很简单,会编程的三两下就搞定。
再其实,我是想找把多份CSS合并的方式,合成一个不难,可以是处理好各模块化的分离同时能在客户端缓存及方便程序调用才是难的,CSS又不像JS可以在客户端异步调用,谁有好的方式介绍一下给我。
传说中的测试
传说中的测试者一号。如果你看到我有边框跟颜色,那就是说CSS生效了。
传说中滴JS测试者。如果你看到我,那JS也生效了
复制代码 代码如下:

使用同一份文件:jscss.php
<link type="text/css" rel="stylesheet" href="jscss.php" /><script type="text/javascript" src="jscss.php"></script>jscss.php的内容
<?header('Content-type: */*');?>
<!-- /*
window.onload=function(){
document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我,那<strong>JS</strong>也生效了";
}
<!-- */
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}
Copyright © 2006-2007 aoao , Some Rights Reserved .