JS动态引入js,CSS——动态创建script/link/style标签
2015-10-16 17:24
656 查看
一.动态创建link方式
我们可以使用link的方式.如下代码所示.
二.动态创建style方式
但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等待上一段下载时间,所以,Firebug Lite采取的是将css代码写在js中,然后动态创建style标签的方法,正如下面所示
这样的话,如果是较少的代码,可以比较方便的实现到动态加载css的效果,但是如果为了方便维护和管理,并没有等待时间限制,使用link方式更加合适
三.动态创建script方式
但是这种方式在IE内核的浏览器中支持,在google、360极速、firefox下却不行
四.打印引入style方式
我们可以使用link的方式.如下代码所示.
function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setAttribute("href", url); var heads = doc.getElementsByTagName("head"); if(heads.length) heads[0].appendChild(link); else doc.documentElement.appendChild(link); }
二.动态创建style方式
但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等待上一段下载时间,所以,Firebug Lite采取的是将css代码写在js中,然后动态创建style标签的方法,正如下面所示
function addCssByStyle(cssString){ var doc=document; var style=doc.createElement("style"); style.setAttribute("type", "text/css"); if(style.styleSheet){// IE style.styleSheet.cssText = cssString; } else {// w3c var cssText = doc.createTextNode(cssString); style.appendChild(cssText); } var heads = doc.getElementsByTagName("head"); if(heads.length) heads[0].appendChild(style); else doc.documentElement.appendChild(style); }
这样的话,如果是较少的代码,可以比较方便的实现到动态加载css的效果,但是如果为了方便维护和管理,并没有等待时间限制,使用link方式更加合适
三.动态创建script方式
var script=document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src", "JustWalking.js"); var heads = document.getElementsByTagName("head"); if(heads.length) heads[0].appendChild(script); else document.documentElement.appendChild(script);
但是这种方式在IE内核的浏览器中支持,在google、360极速、firefox下却不行
四.打印引入style方式
document.write("<link rel=\"stylesheet\" href=\"uild/style.css\" type=\"text/css\" media=\"screen\"/>");
document.write("<script type=\"text/javascript\" src=\"JustWalking.js\"></script>");
相关文章推荐
- 使用netDxf将ArcGIS空间数据按指定样式导出CAD文件
- CSS实现文字内容不被截断当超出指定长度时该字符串自动整体换到下一行
- 前端CSS颜色代码大全
- dialog里面实现自定义样式单选按钮功
- WPF ComboBox样式
- 怎么用CSS设置div里面的table水平居中
- Css圆角边框
- css如何实现背景透明,文字不透明?
- 解决chrome浏览器CSS字体大小小于12px不起作用的方法
- css hack
- 导航条的制作(css)
- CSS3学习笔记(5)—页面遮罩效果
- css样式表中的样式覆盖顺序
- 详解Qt样式/颜色机制:调色板(QPalette)与样式表(Style Sheets)
- DIV+CSS布局最基本的内容
- css浮动(float)
- css常见知识点
- CSS的Float特性
- CSS - 如何实现强制不换行、自动换行、强制换行 以及 chrom默认焦点 IE下 Input 默认出现叉
- css 设计与布局