26-JavaScript高级程序设计-DOM2&3样式

二、样式

在 HTML 中定义样式的方式有 3 种：
1.通过 <link/> 元素包含外部样式表文件（外联）
2.使用 <style/> 元素定义嵌入式样式（嵌入）
3.使用 style 特性定义针对特定元素的样式（行内）

确定浏览器是否支持 DOM2级定义的 CSS能力：

var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");

1. 访问元素的样式

style 属性：包含通过 HTML 的 style 特性指定的样式，不包含与外部样式表或嵌入样式表经层叠而来的样式。（只包含行内样式）
注意1：短横线的css属性名，js中使用驼峰命名。
特例：float（保留字）–> cssFloat（Firefox、Safari、Opera、Chrome）styleFloat（IE）
注意2：在标准模式下，所有度量值都必须指定一个度量单位。

DOM 样式属性和方法

cssText：访问 style 特性中的 CSS 代码。
length：应用给元素的 CSS 属性的数量。
parentRule：表示 CSS 信息的 CSSRule 对象。
getPropertyValue(propertyName)：返回给定属性的字符串值。
getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象。（包含两个属性：cssText、cssValueType-值类型）
getPropertyPriority(propertyName)：如果给定的属性使用了 !important 设置，则返回 “important”；否则，返回空字符串。
item(index)：返回给定位置的 CSS 属性的名称。也可使用方括号语法。两者都是返回的短横线 CSS 属性名。
removeProperty(propertyName)：从样式中删除给定属性。
setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（“important” 或者一个空字符串）。

计算的样式

document.defaultView.getComputedStyle()：获取从其他样式表层叠而来并影响到当前元素的样式
两个参数：要取得计算样式的元素，一个伪元素字符串（如":after"，如不需要伪元素信息可以是 null）。
IE不支持，代替属性：myDiv.currentStyle
注意：
1.所有计算的样式都是只读的。不能修改计算后样式对象中的 CSS 属性。
2.计算后的样式包含属于浏览器内部样式表的样式信息，任何具有默认值的 CSS 属性都会表现在计算后的样式中。

2. 操作样式表

确定浏览器是否支持 DOM2级样式表：

var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets", "2.0");

CSSStyleSheet(样式表) 从 StyleSheet(基础接口) 继承的属性：
disabled：表示样式表是否被禁用的布尔值。（唯一可读写的）
href：如果样式表是通过 <link> 包含的，则是样式表的 URL；否则是 null。
media：当前样式表支持的所有媒体类型的集合。与所有 DOM 集合一样，这个集合也有一个length 属性和一个 item() 方法。也可以使用方括号语法取得集合中特定的项。如果集合是空列表，表示样式表适用于所有媒体。在 IE 中， media 是一个反映 <link> 和 <style> 元素 media特性值的字符串。
ownerNode：指向拥有当前样式表的节点的指针，样式表可能是在 HTML 中通过 <link> 或<style/> 引入的（在 XML 中可能是通过处理指令引入的）。如果当前样式表是其他样式表通过@import 导入的，则这个属性值为 null 。IE 不支持这个属性。
parentStyleSheet：在当前样式表是通过 @import 导入的情况下，这个属性是一个指向导入它的样式表的指针。
title： ownerNode 中 title 属性的值。
type：表示样式表类型的字符串。对 CSS 样式表而言，这个字符串是 “type/css” 。

CSSStyleSheet 类型还支持下列属性和方法：
cssRules：样式表中包含的样式规则的集合。IE 不支持这个属性，但有一个类似的 rules 属性。sheet.cssRules || sheet.rules
ownerRule：如果样式表是通过@import 导入的，这个属性就是一个指针，指向表示导入的规则；否则，值为 null 。IE不支持这个属性。
deleteRule(index)：删除 cssRules 集合中指定位置的规则。IE 不支持这个方法，但支持一个类似的 removeRule() 方法。
insertRule(rule,index)：向 cssRules 集合中指定的位置插入 rule 字符串。IE 不支持这个方法，但支持一个类似的 addRule() 方法。

document.styleSheets：应用于文档的所有样式表集合。
length 属性：可以获知文档中样式表的数量
方括号语法或 item() 方法：可以访问每一个样式表。
不同浏览器的 document.styleSheets 返回的样式表不同。

另一种获取方式：直接通过 <link> 或 <style> 元素取得 CSSStyleSheet 对象
var e = element.sheet || element.styleSheet; // 获取样式表
除IE外浏览器支持 sheet 属性，IE支持 styleSheet 属性。

CSS 规则

CSSRule 对象表示样式表中的每一条规则。
实际上，CSSRule 是一个供其他多种类型继承的基类型，其中最常见的就是 CSSStyleRule 类型，表示样式信息。

CSSStyleRule 对象包含属性：
cssText：返回整条规则对应的文本。（浏览器差异，IE不支持）
parentRule：如果当前规则是导入的规则，这个属性引用的就是导入规则；否则，这个值为null 。（IE不支持）
parentStyleSheet：当前规则所属的样式表。（IE不支持）
selectorText：返回当前规则的选择符文本。（浏览器差异）
style：一个 CSSStyleDeclaration 对象，可以通过它设置和取得规则中特定的样式值。
type：表示规则类型的常量值。样式规则值是 1。（IE不支持）
三个最常用：cssText、selectorText、style。

cssText 属性与 style.cssText 属性类似，不同点：
前者包含选择符文本和围绕样式信息的花括号，后者只包含样式信息；cssText 只读，style.cssText 可以被重写。

示例：

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表 
var rule = rules[0]; //取得第一条规则 
alert(rule.selectorText); //"div.box" 
alert(rule.style.cssText); //完整的 CSS 代码 
alert(rule.style.backgroundColor); //"blue" 

创建规则

insertRule(规则文本，插入位置索引)
浏览器支持：Firefox、Safari、Opera 和 Chrome。
addRule(选择符文本，CSS样式信息，插入位置[可选])
浏览器支持：IE
建议：添加规则多的时候，采用动态加载样式表的技术。

sheet.insertRule("body { background-color: silver }", 0); //DOM 方法
sheet.addRule("body", "background-color: silver", 0); //仅对 IE 有效

删除规则

deleteRule(要删除规则的位置)
浏览器支持：Firefox、Safari、Opera 和 Chrome。
deleteRule(要删除规则的位置)
浏览器支持：IE
建议：删除规则可能会影响 CSS层叠的效果，慎重使用。

sheet.deleteRule(0); //DOM 方法
sheet.removeRule(0); //仅对 IE 有效

3. 元素大小

(1) 偏移量(offset dimension)

包括元素在屏幕上占用的所有可见的空间。
offsetHeight：元素在垂直方向上占用的空间大小，以像素计。
包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。
offsetWidth：元素在水平方向上占用的空间大小，以像素计。
包括元素的宽度、(可见的)垂 直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保存在 offsetParent 属性中。offsetParent 属性不一定与 parentNode 的值相等。
注意：偏移量属性都是只读的，每次访问都需要重新计算。

(2) 客户区大小(client dimension)

指的是元素内容及其内边距所占据的空间大小。
clientWidth：元素内容区宽度加上左右内边距宽度。
clientHeight：元素内容区高度加上上下内边距高度。
注意：客户区大小是只读的，每次访问都要重新计算的。

(3) 滚动大小(scroll dimension)

指的是包含滚动内容的元素的大小。
scrollHeight：在没有滚动条的情况下，元素内容的总高度。
scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小。
scrollLeft 和 scrollTop 既可以确定元素当前滚动的状态（>0滚动），也可以设置元素的滚动位置。

带有垂直滚动条的页面总高度是 document.documentElement.scrollHeight。
对于不包含滚动条的页面而言，scrollWidth/scrollHeight 与 clientWidth/clientHeight 之间的关系并不十分清晰。基于 document.documentElement 查看这两组属性，存在浏览器差异。
在确定文档的总高度时(包括基于视口的最小高度时)，必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果。

(4) 确定元素大小

元素.getBoundingClientRect()
返回会一个矩形对象，包含 4 个属性：left、top、right、bottom。表示元素在页面中相对于视口的位置。
浏览器支持：IE、Firefox 3+、Safari 4+、Opera 9.5 和 Chrome。
浏览器的实现稍有不同：IE8 及更早版本认为文档的左上角坐标是(2, 2)，其他浏览器包括 IE9 将传统的(0,0)作为起点坐标。

---

上一篇：25-JavaScript高级程序设计-DOM2&3变化
下一篇：27-JavaScript高级程序设计-DOM2&3遍历

全书整理版：《Javascript高级程序设计》第3版（总结版）

---