js为元素动态添加css代码

 IE:

 

Code
cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createStyleSheet();
style.cssText
= cssStr;

 

FF:

 

Code
cssStr = "p { color:#FF0000;} a { font-size:9pt;}";
var style = win.document.createElement("style");
style.type
= "text/css";
style.innerHTML
= cssStr;
win.document.getElementsByTagName(
"HEAD").item(0).appendChild(style);
转载请注明出处[ http://samlin.cnblogs.com/] 
作者赞赏
 


刚做的招标网: 八爪鱼招标网 请大家多意见

本文转自Sam Lin博客博客园博客,原文链接:http://www.cnblogs.com/samlin/archive/2008/11/06/1328318.html,如需转载请自行联系原作者
当使用`append()`方法动态添加元素并同时添加CSS样式时,需要注意以下几点: 1. 确保添加CSS样式的选择器与现有的样式不冲突; 2. 确保CSS样式在元素添加到DOM树之后才定义,否则新添加元素不会应用这些样式; 3. 如果需要在添加元素后立即应用CSS样式,可以使用`setTimeout()`方法或者异步加载样式表的方式。 下面是一个示例代码: ```html <style> .red { color: red; } </style> <div id="container"> <p class="red">Hello World</p> </div> <script> // 添加一个新的段落元素,并在其后添加CSS样式 var p = document.createElement('p'); p.textContent = 'New Paragraph'; p.style.color = 'red'; // 添加CSS样式 document.getElementById('container').append(p); </script> ``` 在上面的代码中,我们使用`createElement()`方法创建一个新的段落元素,并为其添加了样式`color: red`。由于样式是在元素添加到DOM树之前定义的,因此新添加元素会应用这些样式。如果需要异步加载样式表,可以使用以下代码: ```html <style> .red { color: red; } </style> <div id="container"> <p class="red">Hello World</p> </div> <script> // 添加一个新的段落元素,并在其后添加CSS样式 var p = document.createElement('p'); p.textContent = 'New Paragraph'; document.getElementById('container').append(p); // 异步加载样式表 var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'path/to/styles.css'; document.head.append(link); </script> ``` 在上面的代码中,我们先添加了一个新的段落元素,然后使用`createElement()`方法创建一个`link`元素,并设置其`rel`属性为`stylesheet`,`href`属性为样式表的路径。最后,将`link`元素添加到`head`元素中,样式表会异步加载并应用到新添加元素上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值