2015-03-12——简析DOM2级样式

CSSStyleSheet对象  表示某种类型的样式表
CSSStyleRule对象  样式表中的每条规则

获得文档中的所有样式表
document.styleSheets

CSSStyleSheet对象
属性
type  text/css
disabled  表示样式表是否应用于当前文档。应用/禁用,false/true
href  样式表相对于当前文档所在的URL
title  可以用来分组样式表的标签
media  表示目标设备类型,screen或print  下一级属性,w3c  mediaText  IE  无
ownerRule  一个只读的CSSRule对象,表示其父规则
cssRules  一个只读的CSSRuleList列表对象,包含样式表中所有CSSRule对象  IE中为rules
方法
insertRule(rule, index);  IE  addRule(selector, declaration, index);
deleteRule(index);
没有专门用于编辑的方法,只能通过修改rules[i]的style属性直接更改。相比于直接修改element的style属性,其可以实现继承。

CSSStyleRule对象
type  继承自CSSRule对象的一个属性,已0-6表示其规则类型。对于CSSStyleRule类型的规则而言,该属性值始终为1。
cssText  表示当前状态下的全部规则。如果被js修改了,该字符串也会相应改变。
parentStyleSheet  引用父CSSStyleSheet对象。
parentRule  如@media
selectorText  规则的选择符
style  与HTMLElement.style类似,是CSSStyleDeclaration对象一个实例。

CSSStyleDeclaration对象
cssText  以字符串形式表示全部规则。
parentRule  引用CSSStyleRule对象
getPropertyValue(porpertyName);
removeProperty(propertyName);
setProperty(propertyName, value, priority);  IE不支持,只能直接通过style,以快捷的方式访问。
还有一个通过CSS2Properties访问CSSStyleDeclaration对象实例(例如HTMLElement的style属性)的快捷方法。

style属性
通过style属性只能访问到元素style属性中已嵌入的方式声明的CSS属性。style属性无法访问由多重样式表层叠而来或从父元素继承而来的任何CSS属性。

基于className切换样式
className引用的是HTMLElement对象的class属性。
为什么不用setAttribute设置class属性?
W3C  element.setAttribute(‘class‘, ‘name‘);
IE  element.setAttribute(‘className‘, ‘name‘);

切换样式表
1、可以使用<link>元素的rel属性定义备用的样式表
2、给body标签应用一个类名
3、添加或移除样式表

<link>元素的属性
type
href
media
rel  "stylesheet"立即应用  "alternate stylesheet"备用
disabled  是否禁用,可以用来控制样式表的启用与否
title  样式表的标题,可用来组合多个样式表。

样式表所属节点
W3C  styleSheet.ownerNode
IE  styleSheet.owningElement

修改CSS规则
只能通过修改rules[i]的style属性,直接更改,没有专用的方法。相比于直接修改element的style属性,其可以实现继承。

增加css规则
DOM2
index = length是列表末尾
stylesheets[i].insertRule(rule, index);
IE
index = -1是列表末尾
stylesheets[i].addRule(selector, declaration, index);

DOM2 规范中可以使用伪类
a[href]:after {
    content: ‘(‘ attr(href) ‘)‘;
    font-size: 40%;
}

访问计算样式
DOM2样式规范中,在document.defaultView中包含了一个叫getComputedStyle()的方法,返回一个只读的CSSStyleDeclaration对象。其中包含了,所有的计算样式。
document.defaultView.getComputedStyle(element, null);  //第二个参数,伪类
IE中使用 element.currentStyle[propertyName]

时间: 2024-10-14 09:58:24

2015-03-12——简析DOM2级样式的相关文章

2015-03-12——简析DOM2级事件

DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load  适用于window对象,页面需要的所有图像文件都载入完成才触发.unload  适用于window对象,页面被关闭之前捕获最后一瞬间的信息.error  适用于window对象和图像对象.图像一旦设置src属性,就开始载入图像.abort  在图像完全载入之前,因浏览器停止载入页面导致图像载入失败时触发.通常发生在

深入浅出WPF--笔记(2015.03.12)

类的作用只是把散落在程序中的变量和函数进行归档封装并控制对它们的访问.被封装在类里的变量称为字段(Field),表示的是类或实例的状态:被封装在类里的函数称为方法(Method),表示类或实例的功能.是否使用static关键字来修饰字段或方法则取决于字段或方法是对类有意义还是对类的实例有意义. C#语言规定:对类有意义的字段和方法使用static关键字修饰,称为静态成员,通过类名加访问修饰符(即"."操作符)访问它们:对类的实例有意义的字段和方法不加static关键字,称为非静态成员或

js 中用Dom2级事件处理函数(改变样式)

下面这些客户端 javascript代码用到了事件,它给一个很重要的事件--“load" 事件注册了一个事件处理程序.同赐教,了展示了注册”click“事件处理函数更高级的一种方法 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <

RecycleView + CardView 控件简析

今天使用了V7包加入的RecycleView 和 CardView,写篇简析. 先上效果图: 原理图: 这是RecycleView的工作原理: 1.LayoutManager用来处理RecycleView的“列表”样式,Support包默认包含了:LinearLayoutManager  横向或纵向的滚动列表. GridLayoutManager  网格列表.StaggeredGridLayoutManager  交错的网格列表. 2.Adapter负责处理RecycleView的数据和样式 3

Nutch学习笔记——抓取过程简析

Nutch学习笔记二--抓取过程简析 学习环境: ubuntu 概要: Nutch 是一个开源Java 实现的搜索引擎.它提供了我们运行自己的搜索引擎所需的全部工具.包括全文搜索和Web爬虫. 通过nutch,诞生了hadoop.tika.gora. 先安装SVN和Ant环境.(通过编译源码方式来使用nutch) apt-get install ant apt-get install subversion [email protected]:~/data/nutch$ svn co https:

JDK源码简析--java.lang包中的基础类库

题记 JDK,Java Development Kit. 我们必须先认识到,JDK只是,仅仅是一套Java基础类库而已,是Sun公司开发的基础类库,仅此而已,JDK本身和我们自行书写总结的类库,从技术含量来说,还是在一个层级上,它们都是需要被编译成字节码,在JRE中运行的,JDK编译后的结果就是jre/lib下得rt.jar,我们学习使用它的目的是加深对Java的理解,提高我们的Java编码水平. 本系列所有文章基于的JDK版本都是1.7.16. 本节内容 在本节中,简析java.lang包所包

Java Annotation 及几个常用开源项目注解原理简析

PDF 版: Java Annotation.pdf, PPT 版:Java Annotation.pptx, Keynote 版:Java Annotation.key 一.Annotation 示例 Override Annotation Java 1 2 3 @Override public void onCreate(Bundle savedInstanceState); Retrofit Annotation Java 1 2 3 @GET("/users/{username}&quo

Linux网络性能优化方法简析

Linux网络性能优化方法简析 2010-12-20 10:56 赵军 IBMDW 字号:T | T 性能问题永远是永恒的主题之一,而Linux在网络性能方面的优势则显而易见,这篇文章是对于Linux内核中提升网络性能的一些优化方法的简析,以让我们去后台看看魔术师表演用的盒子,同时也看看内核极客们是怎样灵活的,渐进的去解决这些实际的问题. AD:2014WOT全球软件技术峰会北京站 课程视频发布 对于网络的行为,可以简单划分为 3 条路径:1) 发送路径,2) 转发路径,3) 接收路径,而网络性

仿冒公检法手机诈骗简析

1 电话诈骗中的半壁江山: 仿冒公检法诈骗 电信诈骗,让人不胜其害.也让人不堪其扰,在受害者中有人倾家荡产,也有人家破人亡.2015年,全国电信诈骗发案59.9万起,被骗走222亿元,这两个数字触目惊心. 而根据腾讯移动安全/反诈骗实验室的数据显示电话诈骗损失中高达57.39%案件都是仿冒公检法诈骗,可以说仿冒公检法类是目前电话诈骗中最大的毒瘤. 2 仿冒公检法诈骗案情回顾 这个案例中诈骗骗子的诈骗套路分为以下几个步骤: 第一步:骗取信任. 骗子通过网络购买的受害者个人信息,例如身份证号.住址等