DOM样式表

一、getElementById的封装 

  function $(id) {
    return document.getElementById(id);
  }

二、cssRules

  它是一个包含了样式表中定义的所有CSS规则的集合,chrome和firefox浏览器能正确实现该标准;IE浏览器将其命名为rules。

    document.styleSheets[sheetsIndex].cssRules[rulesIndex]; 

    document.styleSheets[sheetsIndex].rules[rulesIndex]; 

三、添加、删除样式表

  chrome和FF通过insertRule方式添加,IE通过addRules添加:

    document.styleSheets[0].insertRule(".div3{width:200px;height:200px;}", 0);

  通过deleteRule删除样式表:

    document.styleSheets[0].deleteRule(0);

四、查看最终样式表

  通过getComputedStyle的方式查询:

    window.getComputedStyle(div2, null).width

时间: 2024-08-03 19:49:42

DOM样式表的相关文章

使用Dom操纵样式表

XHTML中的每个元素对象都有一个属性对象style,该对象包含了元素的所有CSS样式.对于每个CSS样式,style对象都有相关的属性与之对应,只是格式有所不同:对单个词的CSS样式,style对象用相同的属性名对应(CSS中的color对应style.color):对于两个词的样式,style对象用去掉两个词之间的连接线,并且第二个词的首字母大些的属性名对应(CSS中的background_color样式对应style.backgroundColor). 下面是几个常用的CSS样式和styl

JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DHTML) CSS样式是一个名称/值的属性列表指定的,属性之间用分号隔开,名字属性和值属性之间用冒号隔开. 1.给文档元素应用样式规则(两种方法) a.在HTML标记的style属性中使用它们.如:<p style=margin-left:Lin;margin-right:lin;"/> b.使用样式

JavaScript 使用DOM操纵样式表

一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.cre

DOM操作样式表

1.操作Style样式属性 1.1通过style对象的属性 document.getElementById("bbb").style.backgroundColor="red"; //由style的属性值访问或者获得的是内联样式 1.2通过style对象的方法//由于IE不支持,所以用第一种方法较好 getPropertyValue(propertyName);//用CSS属性中的写法:background-color getPropertyPriority();

DOM 操纵样式表

CSS对应的JavaScript样式属性:background—color/style.backgroundColor,color/style.color,font/style.font,font-family/style.fontFamily,font-weight/style.fontWeight. 一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

JavaScript访问修改css样式表

1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" style="backgroundColor:blue;"></div> <script type="text/javascript"> var mydiv1=document.getElementById("myid"

(转)CSS样式表继承详解

什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在这里就不一一赘述了.希望深入了解的朋友请google之. 那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素. 下面举个例子,有如下html代码片段: <p>CSS样式表<em>继承特性</em>的演示代码</p> 需要注意的是em是包含在p之内的.

CSS样式表继承详解

最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在这里就不一一赘述了.希望深入了解的朋友请google之. 那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素. 下面举个例子,有如下html代码片段: <p>CSS样式表<