【jQuery学习笔记----操作样式表】

操作样式表

通用CSS样式读写方法

css存在三种形式：行内样式、文档内部样式和文档外部样式。行内样式以元素属性的形式存在，使用style属性即可读写，而文本内部样式和文档外部样式统一被视为外部样式，这些外部样式只能通过DOM 的StyleSheets、CSS和CSS2模块提供的对象、方法和属性进行访问和操作。

 

jQuery实现

jQuery定义了css()方法，使用该方法能够读取指定的样式，也能够为元素设置css样式。

 

javascript实现(读写行内样式)

为了方便读写css样式，0级DOM定义了Style对象，并允许Element对象通过styel属性进行访问。Style对象包含大量Css样式属性，这些属性与CSS属性一一对应。但是它们名称略有不同：

l  对于单独的词的CSS样式来说，Style对象以同名表示对应的CSS脚本属性。例如style.color可以访问color样式

l  对于复合词的CSS样式来说，由于CSS样式使用连字符连接多个单词，Style对象就会删除这些连字符，并以驼峰命名法重命名脚本属性名。例如border-right则borderRight

l  由于float是java及其他语言的关键字，javascript虽然没有把它作为关键字。但作为保留字禁止用户使用。因此，Style对象没有直接与float样式属性对应的脚本属性名。为了解决这个问题，Style对象在float样式属性名前增加css前缀，使用cssFloat属性名来表示与float样式属性对应的脚本

l  Style对象约定所有CSS脚本属性值都是字符串，因此在javascript为脚本属性必须加上引号，以字符串数据类型进行传递。

l  在CSS中，样式声明的尾部会添加分号，但是在脚本属性中分号就不能作为属性值的一部分被引用，因为分号是javascript的语法组成部分。

l  当为脚本属性赋值时，必须包含值和完整的单位，若省略单位，则所设置的脚本样式无效

l  在javascript中可以使用变量动态设置脚本样式的属性值，但是变量的最后以字符串形式存在。另外不要忽略属性值的单位

 

javascript实现（读写样式表）

使用Style对象可以获取指定元素的行内样式，但是无法获取由style元素定义的内部样式表，以及使用link元素或@import命令导入的外部样式表。要读写样式表，则可以使用Document对象的styleSheets  集合包含了文档中所有样式表的引用。例如，所有<style>标签定义的内部样式表，以及使用link元素或@import命令导入的外部样式表。

DOM还为每个样式表定义一个cssRules集合，用来包含指定样式表中所有的规则。但IE浏览器不支持cssRules集合，而是定义了rules集合来支持相同的操作。

兼容：var cssRules = document.styleSheets[0].cssRules|| doucment.styleSeets[0].rules;

cssRules集合和rules集合都包含style属性，用来访问Style对象，并通过Style对象包含的样式脚本，读写具体的样式。

在样式表中写入样式也很简单，

var cssRules =document.styleSheets[0].cssRules || doucment.styleSeets[0].rules;

cssRules[0].style.fontWeight= “bold”;

开发人员也可利用现有的样式表，创建新的样式，并定义各种属性。

非IE浏览器

document.styleSheet[0].insertRule(“p{background-color:blue;color:#fff;}”)

IE浏览器

document.styleSheet[0].addRule(“p”,”{background-color:blue;color:#fff;}”,n)

参数index表示索引号，设置新建样式在样式表中的索引位置，默认为-1，表示位于样式表的末尾，该参数可以不设置