<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;width:10px;height:25px;"></div>

        <script>

            /**

             * 控制样式(行内样式)

             */

            var myDiv = document.getElementById("myDiv");

            myDiv.style.cssText = "width: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;

}

javascript控制样式表(不常用)的更多相关文章

  1. JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

    层叠样式 表和动态HTML   层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准.     使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...

  2. CSS样式表之常用文本属性

    断更了两周了,因为纠结之后在学java啦,但是还是要把学过的前端知识更完 以下的一些文本属性是CSS最常用的属性: [长度单位]:px(像素) [颜色单位]: 十六进制:#ffffff 分别对应红绿蓝 ...

  3. JavaScript实现样式表的简单切换

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. JavaScript控制阻止表单提交

    1.在表单上使用onSubmit方法 <?php $form = ActiveForm::begin([ 'options'=>[ 'class' => 'form-horizont ...

  5. 美丽的表格样式(使用CSS样式表控制表格样式)

    按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...

  6. 漂亮的表格样式(使用CSS样式表控制表格样式)

    根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...

  7. 漂亮的表格样式–>使用CSS样式表控制表格样式

    依照WEB2.0风格,设计了几个表格样式,希望大家喜欢.WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择.现在介绍使用CSS样式表来控制.美化表格的方法. ...

  8. Qt样式表之二：QSS语法及常用样式

    一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...

  9. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

随机推荐

  1. HDU 1041 Computer Transformation 数学DP题解

    本题假设编程是使用DP思想直接打表就能够了. 假设是找规律就须要数学思维了. 规律就是看这些连续的0是从哪里来的. 我找到的规律是:1经过两次裂变之后就会产生一个00: 00经过两次裂变之后也会产生新 ...

  2. 线程中的WaitForSingleObject和Event的用法

    http://chinaxyw.iteye.com/blog/548622 首先介绍CreateEvent是创建windows事件的意思,作用主要用在判断线程退出,程锁定方面. CreateEvent ...

  3. linux 打开文件数too many open files解决方法

    出现这句提示的原因是程序打开的文件/socket连接数量超过系统设定值.查看每个用户最大允许打开的文件数量ulimit -a 其中 open files (-n) 1024 表示每个用户最大允许打开的 ...

  4. Windows下ELK-5.4.3环境搭建

    Windows下ELK-5.4.3环境搭建 一.概述 ELK官网 https://www.elastic.co ELK由Elasticsearch.Logstash和Kibana三部分组件组成: El ...

  5. uboot下netconsole的原理及用法

    近期发现uboot下一个非常有意思也非常有用的功能:netconsole,uboot下的netconsole相似于kernel下的telnet等网络终端功能,将网络作为输入输出的终端,这样就便于我们在 ...

  6. 【LeetCode】Search in Rotated Sorted Array——旋转有序数列找目标值

    [题目] Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 ...

  7. url删除指定字符

    var str = "http://www.xxx.com/?pn=0"; // 删除指定字符 pn=0 // 我将这个字符串里所可能想到的各种情况都列举出来 var a = [ ...

  8. ORACLE物化视图具体解释

    一.物化的一般使用方法物化视图是一种特殊的物理表,"物化"(Materialized)视图是相对普通视图而言的.普通视图是虚拟表.应用的局限性大,不论什么对视图的查询.oracle ...

  9. linux配置nfs步骤及心得

      这节我们介绍NFS的相关概念,以及怎样配置NFS和在client中查看NFS.   NFS的配置过程非常easy. 在server端中编辑/etc/exports文件,加入例如以下内容:      ...

  10. 分布式服务框架 Zookeeper（一）介绍

    一.概述 ZooKeeper(动物园管理员),顾名思义,是用来管理Hadoop(大象).Hive(蜜蜂).Pig(小猪)的管理员,同时Apache Hbase.Apache Solr.LinkedIn ...