zoukankan      html  css  js  c++  java
  • 改变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>

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

  • 相关阅读:
    【连载】【FPGA黑金开发板】NIOSII那些事儿USB设备模式(十九)
    【连载】【FPGA黑金开发板】NIOSII那些事儿LCD中英文字符显示(二十三)
    Asp.Net缓存
    Repeater实现颜色交替
    C#迭代器简单应用
    C#泛型编程初级入门
    利用vs.net快速开发windows服务(c#) (转)
    简单的c#验证类(转)
    编写适合于自己的代码生成器 (zhuan)
    HashTable的使用(转)
  • 原文地址:https://www.cnblogs.com/cly84920/p/4427021.html
Copyright © 2011-2022 走看看