<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. MySQL5.6安装图解(windows7/8_64位)

    这篇文章主要内容是关于MySQL5.6安装图解,希望通过这篇文章顺利解决大家安装MySQL5.6的问题,再也不用为了安装烦恼. 1. 下载MySQL2. 解压MySQL压缩包将以下载的MySQL压缩包 ...

  2. win下配置java环境变量

    系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0)  系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOME%\ ...

  3. CSRF Token

    本文参考自:https://blog.csdn.net/lion19930924/article/details/50955000 目的是防御CSRF攻击. Token就是令牌,最大的特点就是随机性, ...

  4. ThinkPHP第一课 环境搭建

    第一课 环境搭建 1.说明: ThinkPHP是一个开源的国产PHP框架,是为了简化企业级应用开发和敏捷WEB应用开发而诞生的. 最早诞生于2006年初.原名FCS.2007年元旦正式更名为Think ...

  5. tyvj-1460 旅行

    题目描写叙述: A国有n座城市,每座城市都十分美,这使得A国的民众们很喜欢旅行. 然而,A国的交通十分落后,这里仅仅有m条双向的道路.而且这些道路都十分崎岖,有的甚至还是山路.仅仅能靠步行.通过每条道 ...

  6. 如何在VS2010中添加ActiveX控件及使用方法

    方法1: 1.首先在在项目上面右击添加类,如下图所示: 2.点击添加ActiveX控件中的MFC类 3.找到需要添加的ActiveX类. 4.点击完成即可. 5.此时转到资源视图,打开如下视图.可能工 ...

  7. mybatis技术文章

    http://legend2011.blog.51cto.com/3018495/1600478

  8. Ubuntu12安装RobotFramework

    安装Python Ubuntu默认已安装 安装pip wget https://bootstrap.pypa.io/get-pip.py python get-pip.pysudo apt-get i ...

  9. Lua学习六----------Lua流程控制

    © 版权声明:本文为博主原创文章,转载请注明出处 Lua流程控制 - 通过程序设定一个或多个条件语句 - 在条件为true时执行指定程序代码,在条件为false时指定其他指定程序代码 - 控制结构语句 ...

  10. gitlab多人协同工作

    gitlab多人协同工作 本文为亨利向<Git权威指南>的作者蒋鑫老师的答疑邮件写成. 这里特别感谢蒋鑫老师对我询问gitlab的协同工作流程问题的详细解答. 蒋鑫老师的细致专业的解答让我 ...