<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. EasyUI+zTree实现简单的树形菜单切换

    使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...

  2. /etc/shadow 密码加密方法

    [root@mysql-master ~]# cat /etc/shadowroot:$6$spzQDWctb8Lmju0o$KoUz5Qwv1tWyVYfd5cuBw.TQVIaCvCX8ixGG9 ...

  3. C 标准库 - <assert.h>

    C 标准库 - <assert.h> 简介 C 标准库的 assert.h头文件提供了一个名为 assert 的宏,它可用于验证程序做出的假设,并在假设为假时输出诊断消息. 已定义的宏 a ...

  4. Vue2.0 引用 exif.js 实现调用摄像头进行拍照功能以及图片上传功能

    vue组件代码 <template> <div> <div style="padding:20px;"> <div class=" ...

  5. doubango库改动Contact内容的地方

    要在手机client中实现会议功能,从音频会议開始(可能会优点理点).server用的是Centos7 64 + Freeswitch1.4.client是基于doubango的imsdroid.还有 ...

  6. 分享下多年积累的对JAVA程序员成长之路的总结

    http://blog.csdn.net/zhongzelin/article/details/8643269我也搞了几年JAVA了,由于一向懒惰,没有成为大牛,只是一普通程序猿,不爱玩社交网站,不爱 ...

  7. C# 字节数组拼接的速度实验(Array.copy(),Buffer.BlockCopy(),Contact())

    无聊做了如题的一个算法的优劣性能比较,由于很多人都只关心结果,那么我先贴出结果如下: 由于我的测试数据量比较小,只能得出Array.Copy()和Buffer.BlockCopy()方法性能要好于Co ...

  8. jquery列表自动加载更多

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 转：HDMI介绍与流程

    HDMI介绍与流程   HDMI,全称为(High Definition Multimedia Interface)高清多媒体接口,主要用于传输高清音视频信号. HDMI引脚: HDMI有A,B,C, ...

  10. windows下rsync部署安装

    windows下rsync部署安装 2012-06-05 12:06:13|  分类: 系统 |  标签:rsync  windows   |字号 订阅   rsync在windows与windows ...