样式
style对象
任何支持style特性的HTML元素在Javascript中都有个style属性。其包含着通过HTML的style特性指定的所有样式信息(不包括外部样式表)
div.style.color = "red";
div.style.backgroundcolor = "white";
div.style.width = "100px";
除此之外,style对象还具有一些属性和方法
div.style.cssText = "width: 25px; height: 20px"; //style特性中的css代码,可以重写
div.style.length //css属性的个数
div.style.getPropertyValue("color"); //取得某特性的值,返回字符串
div.style.removeProperty("border"); //移除某属性
计算样式
document.defaultView.getComputedStyle()
接受两个参数,取得计算样式的元素和一个伪元素字符串(或null),返回一个类似style的对象,其中包含了当前元素的所有计算样式,但只读不可修改。(IE为currentStyle属性)
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv,null);
alert(computedStyle.width); //100px
alert(computedStyle.color); //"red"
样式表
包括通过<link>
元素包含的样式表和在<style>
元素中定义的样式表
通过document.styleSheets集合来表示样式表,可通过方括号或item()方法访问每个样式表
var sheet = document.styleSheets[0];
样式表的属性和方法
disabled 表示该样式表是否可用(true为不可用),只有该属性可读写,其余属性都是只读
href 如果该样式表是以<link>元素包含的,则是样式表URL,否则为null
cssRules 样式表中包含的样式规则集合,IE为rules属性
deleteRule(index) 删除样式表中指定位置的规则,IE为removeRule()
insertRule(rule,index) 向样式表中指定位置插入样式规则,IE为addRule()
CSS规则
CSSRule对象表示样式表中的每一条规则,通过样式表的cssRules属性,利用方括号可以取得该对象
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0]; //取得第一条规则
CSSRule对象的属性和方法
cssText 返回整条规则对应的文本,与style对象的cssText相比,多了选择符文本和花括号,且只读
selectorText 返回当前规则的选择符文本,例如 "div.box" (box类的div元素)
style 与元素的style对象类似,可以通过它来读取规则中的样式值,例如 style.width
元素大小
偏移量
element.offsetHeight 元素在垂直方向上占用的空间大小,包括元素的高度、滚动条以及边框
element.offsetWidth 元素在水平方向上占用的空间大小,包括元素的高度、滚动条以及边框
element.offsetLeft 元素左外边框至包含元素的左内边框之间的距离
element.offsetTop 元素上外边缘至包含元素的上内边框之间的距离
客户区大小
element.clientWidth 元素内容宽度+左右内边距
element.clientHeight 元素内容高度+上下内边距
滚动大小
element.ScrollHeight 在没有滚动条下元素内容的总高度
element.ScrollWidth 在没有滚动条下元素内容的总宽度
element.ScrollLeft 被隐藏在内容区域左侧的像素数,当水平方向上滚动条未滚动时,这个值为0,可以设置改变水平滚动位置
element.ScrollTop 被隐藏在内容区域上侧的像素数,当垂直方向上滚动条未滚动时,这个值为0,可以设置改变垂直滚动位置
确定元素大小
getBoundingClientRect()
方法返回一个矩形对象,其包含left
,top
,right
,bottom
四个属性,通过加减就可以确定元素大小
var rect = element.getBoundingClientRect();
遍历
NodeIterator
创建
var iterator = document.createNodeIterator(root,whatToShow,filter,entityReferenceExpansion);
- root: 作为搜索起点的树中节点
- whatToShow:表示要访问哪种类型节点的数字代码,存储在NodeFilter的属性中。例如
NodeFilter.SHOW_ALL
(所有类型的节点),NodeFilter.SHOW_ELEMENT
(元素节点),NodeFilter.SHOW_TEXT
(文本节点) - filter:是一个NodeFilter对象,或者一个表示应该接受还是拒绝某种特定节点的函数
- entityReferenceExpansion:布尔值,表示是否扩展实体引用。这个参数在HTML页面中没有用,因为其中的实体引用不能扩展
遍历方法
iterator.nextNode(); //返回下一个节点,遍历到最后节点后,将返回null
iterator.previousNode(); //返回上一个节点,根结点之后,将返回null
TreeWalker
创建
var iterator = document.createTreeWalker(root,whatToShow,filter,entityReferenceExpansion);
- 参数与NodeItertor相同
遍历方法
除了拥有nextNode()
和previousNode()
方法外,还具有以下方法
iterator.parentNode(); //遍历到当前节点的父节点
iterator.firstChild(); //遍历到当前节点的第一个子节点
iterator.lastChild(); //遍历到当前节点的最后一个子节点
iterator.nextSibling(); //遍历到当前节点的下一个同胞节点
iterator.previousSibling(); //遍历到当前节点的上一个同胞节点
范围
创建范围
var range = document.createRange()
简单选择范围
range.selectNode(p); //接受一个DOM节点参数,然后用该结点及其子节点来填充范围
range.selectNodeContents(p); //接受一个DOM节点参数,使用其子节点来填充范围
操作范围
range.deleteContents(); //从文档中删除范围
var deleteRange = range.extractContents(); //从文档中移除并返回该范围
var cloneRange = range.cloneContents(); //创建范围副本
range.insertNode(p); //在选区范围的开始处插入节点
var newRange = range.cloneRange() //复制范围
range.detach //解除对范围的引用