先给出函数。
复制代码 代码如下:
varaddSheet=function(){
vardoc,cssCode;
if(arguments.length==1){
doc=document;
cssCode=arguments[0]
}elseif(arguments.length==2){
doc=arguments[0];
cssCode=arguments[1];
}else{
alert("addSheet函数最多接受两个参数!");
}
if(!+"v1"){//增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜
vart=cssCode.match(/opacity:(d?.d+);/);
if(t!=null){
cssCode=cssCode.replace(t[0],"filter:alpha(opacity="+parseFloat(t[1])*100+")")
}
}
cssCode=cssCode+" ";//增加末尾的换行符，方便在firebug下的查看。
varheadElement=doc.getElementsByTagName("head")[0];
varstyleElements=headElement.getElementsByTagName("style");
if(styleElements.length==0){//如果不存在style元素则创建
if(doc.createStyleSheet){//ie
doc.createStyleSheet();
}else{
vartempStyleElement=doc.createElement('style');//w3c
tempStyleElement.setAttribute("type","text/css");
headElement.appendChild(tempStyleElement);
}
}
varstyleElement=styleElements[0];
varmedia=styleElement.getAttribute("media");
if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){//ie
styleElement.styleSheet.cssText+=cssCode;
}elseif(doc.getBoxObjectFor){
styleElement.innerHTML+=cssCode;//火狐支持直接innerHTML添加样式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}
有时我们需要在.js文件对文档动态引入一些CSS样式。对于一些短小的CSS代码来说，这好办，我们可以调用其style方法，如
复制代码 代码如下:
varddd=document.getElementById("ddd");
ddd.style.border="1pxsolidred";
如果再长一点也无所谓：
复制代码 代码如下:
varddd=document.getElementById("ddd");
ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left";
本人而言，我是喜欢后者。因为前者有严重的兼容问题。如float这个样式，在IE是styleFloat，在火狐等W3C标准游览器是cssFloat。而cssText则是通吃。
如果很长，我们可以动态导入一CSS文件。如
复制代码 代码如下:
functionaddSheetFile(path){
varfileref=document.createElement("link")
fileref.rel="stylesheet";
fileref.type="text/css";
fileref.href=path;
fileref.media="screen";
varheadobj=document.getElementsByTagName('head')[0];
headobj.appendChild(fileref);
}
这个函数在IE中有点累赘。我向来是支持哪个游览器就用哪个游览器的原生函数，直接使用二进制代码效率最高。
复制代码 代码如下:
varoStylesheet=document.createStyleSheet(sURL,iIndex);
createStyleSheet带的两个参数都是可选的。
但如果我们的样式是某个页面独有的，而且只有管理员才能使用到，而且那部分页面是动态生成的，我们需要一开始就引入它吗？需要特意弄个文件来装载它吗？最好的方法让这些样式与动态脚本捆绑在一起。我这个函数就为此而开发的。
坦白说，它最开始是为富文本编辑器而开发的。大家都知道，富文本输入框最流行的做法是把要输入的内容放到iframe中，这就涉及到两种document，一个主页面的document，另一个是iframe的document。iframe的document又涉及到兼容问题。我们可以：
variframe=document.createElement('iframe');//生成用于编辑的richtexteditor
variframeDocument=iframe.contentDocument||iframe.contentWindow.document;
……
嘛，扯远了。总而言之，函数最开始的判定就是为这两种document而准备。如果没有涉及到iframe，我们只传入一个参数就行了。最后一个参数永远是CSS字符串。
然后是动态生成styleSheet元素，把CSS字符串加入到此元素的问题。当然如果有现阶段的，当然就用现成的。DOM元素越多对游览器的负担就越大。我们想到document.styleSheets方法。它返回一个集合，包含style元素与link元素，还涉及一兼容问题，如：
复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="
<head>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/>
<%#强制IE8像IE7一样呈现网页-%>
<metahttp-equiv=”X-UA-Compatible”content=”IE=EmulateIE7″/>
<%#--默认所有的链接都在本窗口打开-%>
<basetarget="_self"/>
<title><%=h(yield(:title))||controller.action_name%></title>
<%=stylesheet_link_tag"screen","button","style"%>
<linkrel="stylesheet"href="/stylesheets/print.css"type="text/css"media="print">
<!--[ifltIE8]>
<linkrel="stylesheet"href="/stylesheets/ie.css"type="text/css"media="screen">
<![endif]-->
<%=javascript_tag"window._token='#{form_authenticity_token}'"ifActionController::Base.allow_forgery_protection%>
<%=javascript_include_tag:defaults%>
<styletype="text/css"media="print"></style>
</head>
上面用alert(document.styleSheets.length);测试一下，IE返回6，W3C游览器返回5。因此，否决了它。而且我们只用到style元素，不使用外联。第二部分的判定就针对head中的style元素而言，没有就创建一个。然后我们把CSS字符串加在第一个style元素就行了。
接着我们要加把保险锁，因为当media="print"时，只在页面打印时，定义的效果才有效。为了防止第一个style元素的media值不是screen，我们得改一改。
复制代码 代码如下:
varstyleElement=styleElements[0];
varmedia=styleElement.getAttribute("media");
if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen");
}
附上media的一些说明。
screen(缺省值)，提交到计算机屏幕；
print，输出到打印机；
projection，提交到投影机；
aural，扬声器；
braille，提交到凸字触觉感知设备；
tty，电传打字机(使用固定的字体)；
tv，电视机；
all，所有输出设备。
最后是如此添加的问题。分IE，火狐与其他游览器三种。判定游览器也用各自的私有属性或方法。如styleSheet是IE独用的，getBoxObjectFor是火狐独用的（当然你也可以使用(/firefox/.test(navigator.userAgent.toLowerCase())），通常DOM操作是最耗时的，能用私有就用私有！
使用方法。
复制代码 代码如下:
addSheet("
.RTE_iframe{width:600px;height:300px;}
.RTE_toolbar{width:600px;}
.color_result{width:216px;}
.color_view{width:110px;height:25px;}
.color_code{text-align:center;font-weight:700;color:blue;font-size:16px;}
div.table{width:176px;position:absolute;padding:1px;}
div.tabletd{font-size:12px;color:red;text-align:center;}
");*/
对比一下51js的客服果果脚本，更短小，但是它会可能会创建多个style元素，还有一些效率的问题……毕竟我这个最初是为开发富文本编辑而开发的，功能不强大不行啊！
/*
动态添加样式表的规则
*/
iCSS={add:function(css){
varD=document,$=D.createElement('style');
$.setAttribute("type","text/css");
$.styleSheet&&($.styleSheet.cssText=css)||
$.appendChild(D.createTextNode(css));
D.getElementsByTagName('head')[0].appendChild($);
}};
iCSS.add("
.dhoooListBox,.dhoooListBoxli{margin:0;padding:0;list-style-type:none;font-size:12px;cursor:default}
.dhoooListBox{border:1pxsolid#aaa;width:180px;background:#eee;height:200px;overflow:auto;float:left}
.dhoooListBoxli{margin:5px;line-height:24px;background:url(images/smilies/time.gif)no-repeat060%;padding-left:25px;color:#555;}
.dhoooListBoxli.selected{background-color:#FFCC33}
");
最后追加几个相关的方法:
vargetClass=function(ele){
returnele.className.replace(/s+/,'').split('');
};
varhasClass=function(ele,cls){
returnele.className.match(newRegExp('(\s|^)'+cls+'(\s|$)'));
}
varaddClass=function(ele,cls){
if(!this.hasClass(ele,cls))ele.className+=""+cls;
}
varremoveClass=function(ele,cls){
if(hasClass(ele,cls)){
varreg=newRegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,'');
}
}
复制代码 代码如下:
varaddSheet=function(){
vardoc,cssCode;
if(arguments.length==1){
doc=document;
cssCode=arguments[0]
}elseif(arguments.length==2){
doc=arguments[0];
cssCode=arguments[1];
}else{
alert("addSheet函数最多接受两个参数!");
}
if(!+"v1"){//增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜
vart=cssCode.match(/opacity:(d?.d+);/);
if(t!=null){
cssCode=cssCode.replace(t[0],"filter:alpha(opacity="+parseFloat(t[1])*100+")")
}
}
cssCode=cssCode+" ";//增加末尾的换行符，方便在firebug下的查看。
varheadElement=doc.getElementsByTagName("head")[0];
varstyleElements=headElement.getElementsByTagName("style");
if(styleElements.length==0){//如果不存在style元素则创建
if(doc.createStyleSheet){//ie
doc.createStyleSheet();
}else{
vartempStyleElement=doc.createElement('style');//w3c
tempStyleElement.setAttribute("type","text/css");
headElement.appendChild(tempStyleElement);
}
}
varstyleElement=styleElements[0];
varmedia=styleElement.getAttribute("media");
if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){//ie
styleElement.styleSheet.cssText+=cssCode;
}elseif(doc.getBoxObjectFor){
styleElement.innerHTML+=cssCode;//火狐支持直接innerHTML添加样式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}
有时我们需要在.js文件对文档动态引入一些CSS样式。对于一些短小的CSS代码来说，这好办，我们可以调用其style方法，如
复制代码 代码如下:
varddd=document.getElementById("ddd");
ddd.style.border="1pxsolidred";
如果再长一点也无所谓：
复制代码 代码如下:
varddd=document.getElementById("ddd");
ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left";
本人而言，我是喜欢后者。因为前者有严重的兼容问题。如float这个样式，在IE是styleFloat，在火狐等W3C标准游览器是cssFloat。而cssText则是通吃。
如果很长，我们可以动态导入一CSS文件。如
复制代码 代码如下:
functionaddSheetFile(path){
varfileref=document.createElement("link")
fileref.rel="stylesheet";
fileref.type="text/css";
fileref.href=path;
fileref.media="screen";
varheadobj=document.getElementsByTagName('head')[0];
headobj.appendChild(fileref);
}
这个函数在IE中有点累赘。我向来是支持哪个游览器就用哪个游览器的原生函数，直接使用二进制代码效率最高。
复制代码 代码如下:
varoStylesheet=document.createStyleSheet(sURL,iIndex);
createStyleSheet带的两个参数都是可选的。
但如果我们的样式是某个页面独有的，而且只有管理员才能使用到，而且那部分页面是动态生成的，我们需要一开始就引入它吗？需要特意弄个文件来装载它吗？最好的方法让这些样式与动态脚本捆绑在一起。我这个函数就为此而开发的。
坦白说，它最开始是为富文本编辑器而开发的。大家都知道，富文本输入框最流行的做法是把要输入的内容放到iframe中，这就涉及到两种document，一个主页面的document，另一个是iframe的document。iframe的document又涉及到兼容问题。我们可以：
variframe=document.createElement('iframe');//生成用于编辑的richtexteditor
variframeDocument=iframe.contentDocument||iframe.contentWindow.document;
……
嘛，扯远了。总而言之，函数最开始的判定就是为这两种document而准备。如果没有涉及到iframe，我们只传入一个参数就行了。最后一个参数永远是CSS字符串。
然后是动态生成styleSheet元素，把CSS字符串加入到此元素的问题。当然如果有现阶段的，当然就用现成的。DOM元素越多对游览器的负担就越大。我们想到document.styleSheets方法。它返回一个集合，包含style元素与link元素，还涉及一兼容问题，如：
复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="
<head>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/>
<%#强制IE8像IE7一样呈现网页-%>
<metahttp-equiv=”X-UA-Compatible”content=”IE=EmulateIE7″/>
<%#--默认所有的链接都在本窗口打开-%>
<basetarget="_self"/>
<title><%=h(yield(:title))||controller.action_name%></title>
<%=stylesheet_link_tag"screen","button","style"%>
<linkrel="stylesheet"href="/stylesheets/print.css"type="text/css"media="print">
<!--[ifltIE8]>
<linkrel="stylesheet"href="/stylesheets/ie.css"type="text/css"media="screen">
<![endif]-->
<%=javascript_tag"window._token='#{form_authenticity_token}'"ifActionController::Base.allow_forgery_protection%>
<%=javascript_include_tag:defaults%>
<styletype="text/css"media="print"></style>
</head>
上面用alert(document.styleSheets.length);测试一下，IE返回6，W3C游览器返回5。因此，否决了它。而且我们只用到style元素，不使用外联。第二部分的判定就针对head中的style元素而言，没有就创建一个。然后我们把CSS字符串加在第一个style元素就行了。
接着我们要加把保险锁，因为当media="print"时，只在页面打印时，定义的效果才有效。为了防止第一个style元素的media值不是screen，我们得改一改。
复制代码 代码如下:
varstyleElement=styleElements[0];
varmedia=styleElement.getAttribute("media");
if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen");
}
附上media的一些说明。
screen(缺省值)，提交到计算机屏幕；
print，输出到打印机；
projection，提交到投影机；
aural，扬声器；
braille，提交到凸字触觉感知设备；
tty，电传打字机(使用固定的字体)；
tv，电视机；
all，所有输出设备。
最后是如此添加的问题。分IE，火狐与其他游览器三种。判定游览器也用各自的私有属性或方法。如styleSheet是IE独用的，getBoxObjectFor是火狐独用的（当然你也可以使用(/firefox/.test(navigator.userAgent.toLowerCase())），通常DOM操作是最耗时的，能用私有就用私有！
使用方法。
复制代码 代码如下:
addSheet("
.RTE_iframe{width:600px;height:300px;}
.RTE_toolbar{width:600px;}
.color_result{width:216px;}
.color_view{width:110px;height:25px;}
.color_code{text-align:center;font-weight:700;color:blue;font-size:16px;}
div.table{width:176px;position:absolute;padding:1px;}
div.tabletd{font-size:12px;color:red;text-align:center;}
");*/
对比一下51js的客服果果脚本，更短小，但是它会可能会创建多个style元素，还有一些效率的问题……毕竟我这个最初是为开发富文本编辑而开发的，功能不强大不行啊！
/*
动态添加样式表的规则
*/
iCSS={add:function(css){
varD=document,$=D.createElement('style');
$.setAttribute("type","text/css");
$.styleSheet&&($.styleSheet.cssText=css)||
$.appendChild(D.createTextNode(css));
D.getElementsByTagName('head')[0].appendChild($);
}};
iCSS.add("
.dhoooListBox,.dhoooListBoxli{margin:0;padding:0;list-style-type:none;font-size:12px;cursor:default}
.dhoooListBox{border:1pxsolid#aaa;width:180px;background:#eee;height:200px;overflow:auto;float:left}
.dhoooListBoxli{margin:5px;line-height:24px;background:url(images/smilies/time.gif)no-repeat060%;padding-left:25px;color:#555;}
.dhoooListBoxli.selected{background-color:#FFCC33}
");
最后追加几个相关的方法:
vargetClass=function(ele){
returnele.className.replace(/s+/,'').split('');
};
varhasClass=function(ele,cls){
returnele.className.match(newRegExp('(\s|^)'+cls+'(\s|$)'));
}
varaddClass=function(ele,cls){
if(!this.hasClass(ele,cls))ele.className+=""+cls;
}
varremoveClass=function(ele,cls){
if(hasClass(ele,cls)){
varreg=newRegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,'');
}
}
标签：
CSS样式表,动态添加
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“JS函数实现动态添加CSS样式表文件”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。