<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. 主机屋 ubuntu 14安装nginx

    http://www.cnblogs.com/piscesLoveCc/p/5794926.html 安装gcc g++的依赖库 1 sudo apt-get install build-essent ...

  2. Linux 设备驱动模型

    Linux系统将设备和驱动归一到设备驱动模型中了来管理 设备驱动程序功能: 1,对硬件设备初始化和释放 2,对设备进行管理,包括实参设置,以及提供对设备的统一操作接口 3,读取应用程序传递给设备文件的 ...

  3. Geographical distance

    Introduction Calculating the distance between geographical coordinates is based on some level of abs ...

  4. 通过run configuration启动项目

    系统通过配置加载路径是通过classpath加载绝对路径 设置属性选中某个项目,然后在工具栏中选择"Run-->Run Confgurations“,然后在对话框的右边选择" ...

  5. AutoCAD如何快速标注零件序号

    1 先画好一条直线和一个数字   2 选中刚才绘制的数字和直线,选择阵列(估计大概要画四十个就阵列四十行,改一下行偏移)   预览效果如图所示   随后不断重复直线即可   横向也是一样   最后双击 ...

  6. Action window Flags

    Action window 主要字段使用 含义     target 值 作用 current 当前窗口 new 新窗口 inline 内联编辑 fullscreen 全屏 main 当前窗口的主动作 ...

  7. [原创] 浅谈开源项目Android-Universal-Image-Loader(Part 3.1)

    最近,总算有时间去做些平时喜欢而没空去做的事情.一直觉得项目中使用的Image Loader适用性不强,昨晚在github随便逛逛,发现一个开源项目Android-Universal-Image-Lo ...

  8. 11-BeautifulSoup库详解

    ---恢复内容开始--- 灵活又方便的网页解析库,处理高效,支持多种解析器. 利用它不用编写正则表达式即可方便地实现网页信息的提取. 这个库有四个主要方法吧,其中xlml是最常用的,他的标签选择器可以 ...

  9. Android 自己定义ImageView实现圆角/圆形 附加OnTouchListener具体凝视以及Button圆角

    转载请注明出处:王亟亟的大牛之路 平时要用一些非方方正正的button之类的小伙伴们是怎样实现的?RadioButton? ImageButton? 还是其它? 今天亟亟上的是ImageView来实现 ...

  10. oracle中v$sga_target_advice的用途

    v$sga_target_advice:该视图可用于建议SGA大小设置是否合理.   SELECT a.sga_size,--sga期望大小          a.sga_size_factor,-- ...