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!!!
  • 相关阅读:
    flask 使用 SQLAlchemy 的两种方式
    python package 的两种组织方式
    sqlalchemy 的 raw sql 方式使用示例
    Git高速入门——Git安装、创建版本号库以及经常使用命令
    mariadb 10.1.10安装
    Android studio中导入第三方类库
    怎样获取oracle dbid
    宇宙中为何存在“黑洞”?
    CSDN日报20170401 ——《假设你还是“程序猿”,我劝你别创业!》
    clang-format中文出错
  • 原文地址:https://www.cnblogs.com/longfeiPHP/p/6185596.html
Copyright © 2011-2022 走看看