Firefox 下动态插入 CSS 多行文本……

作者：屈超（Chappell.Wat） 发布时间：April 28, 2009 分类：笔记::千草

不多介绍，
明白人儿都知道我的意思。
其实也可以说是动态插入样式单的标签。

首先，
对于 Content 级的脚本，
我们可以这么写：

(document.getElementsByTagName('head')[0] || document.documentElement)
    .appendChild(document.createElement('style'))
    .appendChild(document.createTextNode((<quchao><![CDATA[
        /* Multi-line CSS Text Goes Here; from QuChao.com */
]]></quchao>).toString()));

值得注意的是 Firefox 虽然支持 CDATA 文本，
但在使用时要小 hack 一下。
该方法可以用于 GreaseMoneky 等执行于 Content 级别的脚本里，
当然 Web 里也没有问题啦。

其次，
对于 Chrome 级别的脚本，
我建议这么写：

document.insertBefore(document.createProcessingInstruction(
 'xml-stylesheet',
 'type="text/css" href="data:text/css,' + encodeURI(<![CDATA[
        /* Multi-line CSS Text Goes Here; from QuChao.com */
]]>.toString()) + '"'), document.documentElement);

这个方法很巧妙，
先将内容进行转码，
然后以 data: 协议载入。

当然，
也可以用寻常的方法：

document.insertBefore(document.createElementNS('http://www.w3.org/1999/xhtml', 'style')
    .appendChild(document.createTextNode(<![CDATA[
        /* Multi-line CSS Text Goes Here; from QuChao.com */
]]>.toString())), document.documentElement);

好了，
今天就总结到这里，
下课。

标签: Mozilla, Firefox, Script, CSS

已有 10 条评论 »

  1. 布里斯班 布里斯班 April 29th, 2009 at 10:14 am

    谢谢分享！
    这个css挺神奇的

    Reply
  2. an9 an9 May 2nd, 2009 at 06:44 pm

    技术贴,不懂,路过.

    Reply
  3. aw aw May 8th, 2009 at 09:43 am

    啥时候加入Typecho的。。。好久不来了。

    Reply
  4. Chappell.Wat Chappell.Wat May 9th, 2009 at 05:29 pm

    @aw
    wordpress 玩腻了，
    换个口味。

    Reply
  5. aw aw May 13th, 2009 at 04:18 pm

    期待转换程序 >_< ...

    Reply
  6. Chappell.Wat Chappell.Wat May 15th, 2009 at 03:19 am

    @aw
    本来就有转换程式的，
    还比较完美，
    但你的博客花边东西太多，
    估计比较难转。

    Reply
  7. 落魄博主 落魄博主 May 21st, 2009 at 12:43 am

    学习了 谢谢了 ！！

    Reply
  8. xlnv xlnv May 29th, 2009 at 09:49 am

    谢谢分享！继续关注！

    Reply
  9. kensai speed kensai speed June 1st, 2009 at 10:38 am

    wordpress 玩腻了,有點兒悶

    Reply
  10. rokki rokki June 1st, 2009 at 10:40 am

    學到了好東西謝謝分享!

    Reply
Click here to cancel reply

添加新评论 »