<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. 英语词组instead of的用法

    nstead of 是个短语介词.Instead of 的意思是“代替……”.“而不……”, 在语言的实际运用中,instead o功能与连词十分相似,现归纳如下: 1.跟名词:I give him ...

  2. mock平台架构及实现

    转载: http://blog.csdn.net/xkhgnc_6666/article/details/51757209 在测试过程中有些情况通过手工测试是无法测试出来的或是非常难复现,比如网络异常 ...

  3. 2017.04.20 Adams仿真介绍

    Adams 仿真 | 验证"隐性机器人模型"概念,提高视觉伺服精度 产品:Adams行业:科研优势: 1.Adams 仿真可精确预测机器人的位置和方位 2.仿真在理论工作验证中起着 ...

  4. Android 基于Retrofit+Rxjava搭建的简单易用的网络架构

    装逼開始之前,为大家推荐两篇文章,用来更好的学习Retrofit和Rxjava. 在这里我们要感谢互联网装逼行业勇于献身,甘于奉献的的大婶们. 我仅代表个人,给您们跪舔了. Retrofit:Retr ...

  5. struts2注解总结----@Action和@Result

    除了使用配置文件配置之外,还能够使用注解来配置 以下是一些经常使用的注解 介绍: @Action/@Actions: @Action指定一个类为action,相应配置文件里的<action> ...

  6. linux 系统时间硬件时间同步

    1.设置系统时间:date-s 21/05/2016 date -s 08:21:21 2.系统时间同步到硬件时间: clock --systohc

  7. linux 内核（系统）、函数的理解、宏的程序调试

    1.操作系统 1.1.Linux 内核(系统)的组成的部分: 内核主要有:进程调度.内存管理.虚拟文件系统.网络接口和进程通信五个部分组成. (1)进程调度 进程调度是CPU对多个进程对CPU访问的调 ...

  8. JS创建表单提交备份

    //保存 function saveFT() { var data = { createDate: GetDateStr(0), name: $("#txtName").val() ...

  9. winform 下载文件显示进度和百分比

    /// <summary> /// 下载完成 /// </summary> private void DownloadFileCompleted() { IsComlate = ...

  10. python 中给文件加锁——fcntl模块

    如果没有fcntl模块则用 sudo pip install fcntl安装 模块简单说明: 打开文件,不存在则创建之 f = open('./test','w') fcntl.flock(f,fcn ...