zoukankan      html  css  js  c++  java
  • javascript控制样式表(不常用)

    <html>
        <head>
            <title>Example XHTML page</title>
            <link href="css1.css" rel="stylesheet" />
            <link href="css2.css" rel="stylesheet" />
            <style>
                body{ background: #ccc;}
            </style>
        </head>
        <body>
            <div id="myDiv" style="background-color:blue;10px;height:25px;"></div>
            <script>
                /**
                 * 控制样式(行内样式)
                 */
                var myDiv = document.getElementById("myDiv");
                myDiv.style.cssText = "100px; height:100px; background-color:green;border:2px solid #f00;";//一次性设置多个样式
                myDiv.style.removeProperty("border");//删除样式
                //迭代样式
                for(var i=0, len=myDiv.style.length; i<len; i++){
                    var prop = myDiv.style[i];//或者myDiv.style.item(i)
                    value = myDiv.style.getPropertyValue(prop);
                    console.log(prop+':'+value);
                }
                /**
                 * 操作样式表(CSS):包括页面中style的样式(不常用)
                 */
                var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets","2.0");
                console.log(supportsDOM2StyleSheets);//判断是否支持DOM2级的样式表
                var style1 = document.styleSheets[0];//css1.css
                var style2 = document.styleSheets[1];//css2.css
                var style3 = document.styleSheets[2];//页面中的style样式表
                console.log(style1);//获取第一个样式表
                console.log(style2);//获取第二个样式表
                console.log(style3);//获取第三个样式表
                //添加样式规则
                style1.insertRule("div { border:1px solid #ff0}",0);//非IE
                style1.addRule("div","border:1px solid #ff0",0);//IE
                //deleteRule 删除规则  removeRule IE
            </script>
        </body>
    </html>

    css1:

    div{
        width:100px;
        height: 100px;
    }

    css2:

    a{
        width: 500px;
        height: 100px;
    }
    If the copyright belongs to the longfei, please indicate the source!!!
  • 相关阅读:
    python的select和epoll
    ibatis annotations 注解方式返回刚插入的自增长主键ID的值
    java web 项目中获取当前路径的几种方法
    Servlet的监听器
    mybatis-配置文件mybatis-config.xml
    数据库死锁
    JDBC控制事务
    server.xml 解析
    linux下Tomcat 安装后执行startup.sh,出现– Cannot find …bin/catalina.sh
    jni 类初始化失败(nested exception is java.lang.NoClassDefFoundError)
  • 原文地址:https://www.cnblogs.com/longfeiPHP/p/6185596.html
Copyright © 2011-2022 走看看