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>

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

  • 相关阅读:
    在WCF中使用Flag Enumerations
    WCF开发教程资源收集
    [转]WCF 4 安全性和 WIF 简介
    Asp.Net Web API 2 官网菜鸟学习系列导航[持续更新中]
    Asp.Net Web API 2第十八课——Working with Entity Relations in OData
    Asp.Net Web API 2第十七课——Creating an OData Endpoint in ASP.NET Web API 2(OData终结点)
    Asp.Net Web API 2第十六课——Parameter Binding in ASP.NET Web API(参数绑定)
    Asp.Net Web API 2第十五课——Model Validation(模型验证)
    函数 生成器 生成器表达式
    函数的进阶
  • 原文地址:https://www.cnblogs.com/cly84920/p/4427022.html
Copyright © 2011-2022 走看看