• 改变dom样式的方法[续]


       前两天才刚刚想到可不可以用改变<style>标签innerHTML的方式改变dom的样式,昨天看YUI文档的时候,发现新增了StyleSheet Utility组件,其功能就是支持通过更改<style>标签的innerHTML来改变dom样式。

       还没去看源码,不过,大概猜得到源码里做了些什么动作。就像我在《改变dom样式的方法》一文中说的一样,<style>标签在FF下是可以读写的,但ie下却需要通过特殊的方法实现,StyleSheet Utility组件一定会透明地对其进行封装。总之,YUI现在提供了对<style>标签innerHTML更改的组件了,那么,现在改变dom样式的方法,有三种方式可以自由选择了。

       YUI的确是不错,前两天刚想到的问题,马上就在YUI最新的组件里找到了答案,继续支持。

    ========================================================

    续:原来在firefox下,<style>标签可以写styleNode.innerHTML="xxx{}",在IE下innerHTML不能赋值,但可以通过styleNode.styleSheet.cssText="xxx{}"来赋值。

    例如:

    ========================================

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>阿当制作</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <p>hello world</p>
    <script type="text/javascript">
    var nod = document.createElement("style"), str = "body{background:#000;color:#fff} p{font-size:20px;padding:5px;border:2px solid #fff}";
    nod.type="text/css";
    if(nod.styleSheet){
    nod.styleSheet.cssText = str;
    } else {
    nod.innerHTML = str;
    }
    document.getElementsByTagName("head")[0].appendChild(nod);
    </script>
    </body>
    </html>

    ========================================

    注意,如果我们直接写在页面里,可以省掉style标签的type属性,但如果要动态加载的话,就一定需要声明styleNode.style="text/css"了,否则styleNode的styleSheet为null。

    node.style=xxx这种方式还没办法修改伪类的样式,用这种方式修改样式还可以完成:hover伪类的样式修改!

    =========================================

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>阿当制作</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <a href="#">hello world</a>
    <script type="text/javascript">
    var nod = document.createElement("style"), str = "body{background:#000;color:#fff} a{color:#fff;text-decoration:none;} a:hover{color:red;text-decoration:underline}";
    nod.type="text/css";
    if(nod.styleSheet){
    nod.styleSheet.cssText = str;
    } else {
    nod.innerHTML = str;
    }
    document.getElementsByTagName("head")[0].appendChild(nod);
    </script>
    </body>
    </html>

    =========================================

  • 相关阅读:
    iPhone之Quartz 2D系列--编程指南(1)概览
    【Lucene3.6.2入门系列】第15节_SolrJ高亮
    项目估算与计划不是一般的难!(6)——如何跟踪计划?
    客户端MapReduce提交到YARN过程
    项目估算与计划不是一般的难!(7)——优秀项目经理是怎样炼成的?
    Properties/Property文件读取(键值均)乱码问题!
    hdu4431 Mahjong 枚举搜索。。
    weblogic 日志介绍
    dp poj 1080 Human Gene Functions
    inter
  • 原文地址:https://www.cnblogs.com/cly84920/p/4427022.html
Copyright © 2020-2023  润新知