使用 style 属性，仅仅只能获取和设置行内的样式，如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了，使用 getComputedStyle 和currentStyle，这只能获取却无法设置。

一、检测是否支持StyleSheet类型操作通过<link>元素和<style>元素包含的样式表。

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box');

        alert(document.implementation.hasFeature('StyleSheets', '2.0')); //检测是否支持 链接式或内联式样式表

        alert(document.getElementsByTagName('link')[0]); //HTMLLinkElement  ,如果没有时undefined

        alert(document.getElementsByTagName('style')[0]); //HTMLStyleElement ,如果没有时undefined

    }

</script>

<style type="text/css">

    .aaa{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    .bbb{

        font-size:30px;

        color:blue;

        background:orange;

    }

    .ccc{

        float:right;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

　　

　　

二、获取CSSStyleSheet对象　　

　　这两个元素本身返回的是 HTMLLinkElement 和 HTMLStyleElement 类型，但CSSStyleSheet 类型更加通用一些。得到这个类型非 IE 使用 sheet 属性，IE 使用 styleSheet；

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementById('box');

        var style = document.getElementsByTagName('style')[0];

        //var sheet = style.sheet;//IE6,7,8不支持

        //var sheet = style.styleSheet;//非IE不支持

        //做兼容

        var sheet = style.sheet || style.styleSheet; //得到 CSSStyleSheet

        alert(sheet);

    }

</script>

<style type="text/css">

    .aaa{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    .bbb{

        font-size:30px;

        color:blue;

        background:orange;

    }

    .ccc{

        float:right;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

　　除了上面的方法可以得到 CSSStyleSheet 类型，还有一种方法是通过 document 的styleSheets 属性来获取。所有浏览器都兼容的

<script type="text/javascript">

    window.onload = function(){

        //var sheet = document.styleSheets;//得到的[object StyleSheetList]集合

        var sheet = document.styleSheets[0];//得到第一个CSS样式表对象

        alert(sheet);

    }

</script>

<style type="text/css">

    .aaa{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    .bbb{

        font-size:30px;

        color:blue;

        background:orange;

    }

    .ccc{

        float:right;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

三、CSSStyleSheet对象的属性和方法

　　　　

<script type="text/javascript">

    window.onload = function(){

        //var sheet = document.styleSheets;　　　　　　　　//得到的[object StyleSheetList]集合

        var sheet = document.styleSheets[0];　　　　　　　　//得到第一个CSS样式表对象

        //alert(sheet.disabled); 　　　　　　　　　　　　　　//false，可设置为 true，设置为true后样式被禁用，网页的样式也就没有了

        //alert(sheet.href); 　　　　　　　　　　　　　　//css 的 URL,如果是内联样式表，不是使用link链接进来的为null

        //alert(sheet.media); 　　　　　　　　　　　　//MediaList，集合 支持度也不是很好

        //alert(sheet.media[0]); 　　　　　　　　　　//第一个 media 的值

        //alert(sheet.title); 　　　　　　　　　　　　//得到 title 属性的值

        alert(sheet.cssRules); 　　　　　　　　　　　　//CSSRuleList，样式表规则集合  样式规则就是一群样式表示一个规则

        alert(sheet.cssRules[0]);　　　　　　　　　　//得到的第一个规则，还是一个集合

        alert(sheet.cssRules[0].cssText);　　　　　　//把第一个规则的css文本即所有属性和值获取到

        alert(sheet.cssRules[0].selectorText);　　　　　　//得到第一个规则的css选择符

        //sheet.deleteRule(0); 　　　　　　　　　　//删除第一个样式规则

        sheet.insertRule("body {background-color:red}", 0); 　　//在第一个位置添加一个样式规则

    }

</script>

<style type="text/css">

    .aaa{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    .bbb{

        font-size:30px;

        color:blue;

        background:orange;

    }

    .ccc{

        float:right;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

　　cssRules、deleteRule、insertRule这三个方法IE6,7,8不支持，可以使用下面的替代方法，但只能支持IE

<script type="text/javascript">

    window.onload = function(){

        //var sheet = document.styleSheets;//得到的[object StyleSheetList]集合

        var sheet = document.styleSheets[0];//得到第一个CSS样式表对象

        alert(sheet.rules); 　　　　　　　　　　//代替 cssRules 的 IE 版本

        sheet.removeRule(0); 　　　　　　　　//代替 deleteRule 的 IE 版本

        sheet.addRule("body", "background-color:red", 0);　　//代替 insertRule 的 IE 版本

    }

</script>

<style type="text/css">

    .aaa{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    .bbb{

        font-size:30px;

        color:blue;

        background:orange;

    }

    .ccc{

        float:right;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

　　 跨浏览器兼容

<script type="text/javascript">

    window.onload = function(){

        //var sheet = document.styleSheets;//得到的[object StyleSheetList]集合

        var sheet = document.styleSheets[0];//得到第一个CSS样式表对象

        //跨浏览器兼容获取rules

        var rules = sheet.cssRules || sheet.rules;

        alert(rules);

        //跨浏览器兼容删除某条规则     position这个参数表示第一条规则

        function deleteRule(sheet,position){

            if(sheet.deleteRule){

                sheet.deleteRule(position);

            }else if(sheet.removeRule){

                sheet.removeRule(position);

            }

        }

        //跨浏览器兼容按参数添加一条规则

        //第一个参数表示sheet（那个CSS文本对象）第二个参数是选择符，第三个参数表示css样式文本，第四个参数表示插入的位置

        function insertRule(sheet,selectorText,cssText,position){

            if(sheet.insertRule){

                sheet.insertRule(selectorText+"{"+cssText+"}", position);

            }else if(sheet.addRule){

                sheet.addRule(selectorText,cssText,position);

            }

        }

    }

</script>

<style type="text/css">

    .aaa{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    .bbb{

        font-size:30px;

        color:blue;

        background:orange;

    }

    .ccc{

        float:right;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

四、Rules 属性

　　通过 CSSRules 属性(非 IE)和 rules 属性(IE)，我们可以获得样式表的规则集合列表。这样我们就可以对每个样式进行具体的操作了。
　　

<script type="text/javascript">

    window.onload = function(){

        var sheet = document.styleSheets[0]; //CSSStyleSheet

        var rules = sheet.cssRules || sheet.rules; //CSSRuleList，样式表的规则集合列表

        var rule = rules[0]; //CSSStyleRule，样式表第一个规则

        alert(rule.cssText); //当前规则的样式文本

        alert(rule.selectorText); //#box，样式的选择符

        alert(rule.style.color); //red，得到具体样式值

         //Chrome 浏览器在本地运行时会出现问题，rules 会变成 null，只要把它放到服务器上允许即可正常。

    }

</script>

<style type="text/css">

    .aaa{

        font-size:20px;

        color:red;

        background:#ccc;

    }

    .bbb{

        font-size:30px;

        color:blue;

        background:orange;

    }

    .ccc{

        float:right;

    }

</style>

</head>

<body>

    <div id="box" class="aaa">测试Div</div>

</body>

五、总结三种操作 CSS 的方法

　　第一种 ：通过style属性操作行内样式，可读可写；

　　第二种：通过计算后的样式操作行内、内联和链接，使用 getComputedStyle 或 currentStyle，可读不可写；
　　第三种 cssRules 或 rules，内联和链接可读可写。

JavaScript的DOM_StyleSheet操作内联或链接样式表的更多相关文章

  1. 内联式css样式，直接写在现有的HTML标签中

    CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...

  2. JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...

  3. [转]sql:除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询

    执行sql语句: select * from ( select * from tab where ID>20 order by userID desc ) as a order by date ...

  4. [sql Server]除非另外还指定了TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效

    今天遇到一个奇怪的问题,项目突然要从mysql切换到sql server数据库,包含order by 子句的嵌套子查询报错. 示例:select top 10 name,age,sex from ( ...

  5. sql:除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询

    执行sql语句: select * from ( select * from tab where ID>20 order by userID desc ) as a order by date ...

  6. ORDER BY 子句在视 图、内联函数、派生表、子查询和公用表表达式中无效

    SQL语句: select * from (select distinct t2.issue,cashmoney from (select distinct issue from lot_gamepa ...

  7. javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)

    样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效.   (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...

  8. 除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效。

    在 SELECT 后加 TOP 100 PERCENT .

  9. JavaScript的DOM操作获取元素的大小

    通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...

随机推荐

  1. Linux进程管理之“四大名捕”

    一.四大名捕 四大名捕,最初出现于温瑞安创作的武侠小说,是朝廷中正义力量诸葛小花的四大徒弟,四人各怀绝技,分别是轻功暗器高手“无情”.内功卓越的高手“铁手”.腿功惊人的“追命”和剑法一流的“冷血”本文 ...

  2. RabbitMQ---2、介绍

    1.背景 RabbitMQ是一个由erlang开发的AMQP(Advanved Message Queue)的开源实现. 2.应用场景 2.1异步处理 场景说明:用户注册后,需要发注册邮件和注册短信, ...

  3. 用户登录注册（安全）(常规、FB、google、paypal) 实战

    /* 用户登录界面 */elseif ($action == 'login'){    if($_SESSION['user_id'])    {        ecs_header("Lo ...

  4. 从MySQL到ORM(三)：连接、存储过程和用户权限

    一.联结表 数据仍使用前文中的数据. 1.子查询 作为子查询的SELECT语句只能查询单个列.企图检索多个列将返回错误. -- 作为查询条件使用 -- 查看TNT2订单对应的客户ip(order表) ...

  5. Java基础之JDK的下载与安装

    做Java开发已经很长一段时间了,最近在回顾Java的基础知识,感觉好多都是知道这个概念,能说个皮毛,但是往深了说又不知道怎么说,所以打算对Java从头做一个回顾,算是对自己所学知识的一个巩固和深入了 ...

  6. bzoj3697_FJ2014集训_采药人的路径_solution

    小道士的矫情之路: 点分治, 对于每个子树,处理其内经过根(重心)的路径,然后递归下一层子树: 如何处理经过根的合法路径 合法有两个要求: 把输入的0改成-1后 1.len=0; 2.存在一个点i使被 ...

  7. Vue.js小案例(2)

    即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...

  8. Spring Data MongoDB 分页查询

    在上篇文章 Spring Data MongoDB 环境搭建 基础上进行分页查询 定义公用分页参数类,实现 Pageable 接口 import java.io.Serializable; impor ...

  9. 新年开篇-ERP和OA集成步骤

    1.备份要升级帐套的数据库 6点 - 6点10分完成 重启 服务器 2.升级数据库 6点30 - 7点 3.配置ERP电子表单和EasyFlow表单 7点 - 7点30分 录入多公司信息(电子签核), ...

  10. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...