DOM2级样式

一、常用方法

1.确定文档的归属窗口：

varparentWindow=document.defaultView||document.parentWindow//IE

2.用于确定当前节点具有什么能力（建议使用能力检测）

Document.body.isSupported();

Document.implementation.hasFeature();

接收两个参数：特性名和版本号

3.DOM3级引入两个辅助比较节点的方法（返回值为布尔值）

 isSameNode():判断节点是否相同，两个是否引用同一个对象

 isEqualNode():判断节点是否相等，两个是否具有相同的类型和相同的属性。

4.框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示：

 属性contentDocument指向表示框架内容的文档对象。

 IE8以前支持：contentWindow属性。

 兼容写法：

var iframe=document.getElementById(‘myIframe’);

   var  iframeDoc=iframe.contentDocument||iframe.contentWindow.document

 

二、样式

1.判断浏览器是否支持DOM2级定义的CSS能力

var  a=document.implementation.hasFeature(‘CSS’,’2.0’);

var  b=document.implementation.hasFeature(‘CSS2’,’2.0’);

2.访问元素的样式

 （1）obj.style.属性名（注意驼峰式写法）。

 （2）特殊的属性：float  非IE:cssFloat ,IE:styleFloat

 3. style对象的属性与方法

 cssText : 访问style特性中的css 代码  读取模式和写入模式

 length : css属性数量

 item(index): 返回指定位置的css属性名称

 getPropertyValue(propertyName): 返回属性值

 removeProperty(属性名): 从样式中删除属性

 setProperty(propertyName,value,priority): 将给定属性设置为相应的值，并加上优先权标志（’important’或一个空字符串）。

 4.计算的样式(所有样式都是只读的，不能修改其属性)

  非IE:document.defaultView.getComputedStyle(obj,null).属性名;

  IE: obj.currentStyle.propertyName.propertyName;

5.操作样式表

  (1).判断浏览器是否支持DOM2级样式表

     document.implementation.hasFeature(‘StyleSheets’,’2.0’);

 (2) CSSStyleSheet常用属性：

    disabled: 表示样式表是否被禁用的布尔值

    href：<link  href=” ”> 中的URL

    type: 表示样式表类型的字符串

    cssRules :样式表中包含样式规则的集合，IE:rules

  (3) 获取样式表

      1. document.styleSheets集合:表示应用于文档的所有样式表.

      2. obj.sheet || obj.styleSheet //obj可以是<link>/<style>元素

  (4)CSS规则

 CSSRule对象表示样式表的每一条规则，继承CSSRule的CSSStyleRule对象包含以下属性(IE不支持)：

 1. cssText:返回整条规则对应的文本

 2.selectorText：返回当前规则的选择符文本

 3. style:

   

（5）创建规则

      1.sheet.insertRule(“body{ background:red }”, 0);//DOM方法

        注：两个参数：规则文本和插入位置的索引

     2.sheet.addRule(“body”,”background:red”,0);//IE8以前

      注：三个参数：选择符文本，css样式信息，插入规则的位置（可选）

 

     3.跨浏览器写法：

functioninsertRule(sheet,selectorText,cssText,position){

             if(sheet.insertRule){

                sheet.insertRule(selectorText +“{”+cssText+”}”,position);

}else{

    sheet.addRule(selectorText,cssText,position);

}

}

  (6)元素大小（不属于DOM2，IE引入的属性，所有浏览器都支持）

1.偏移量

offsetHeight:包括元素高度，可见滚动条和边框高度

offsetWidth:同上

offsetLeft:左外边框到包含元素左内边框的距离

offsetTop：上外边框到包含元素上内边框的距离

offsetParent:保存着包含元素

要想知道某个元素的偏移量，要将offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素

两个函数：

 function getElementLeft(element){

   var actualLeft=element.offsetLeft; //获取当前元素的偏移量

   var current=element.offsetParent; //获取包含元素

    while(current!==null){

      actualLeft +=current.offsetLeft; //累加包含元素

      current=current.offsetParent; //重新计算包含元素

}

return actualLeft;

}

function getElementTop(element){

    ….

}

 

2.客户区大小

clientWidth和clientHeight :元素内容及其内边距所占据的空间大小

 

document.documentElement.clientWidth||document.body.clientWidth(IE7之前)

 

3.滚动大小

  scrollHeight:在没有滚动条时，元素内容的高度

 scrollWidth: …

 scrollTop:…

 scrollLeft:被隐藏在内容区域左侧的像素

 兼容：document.documentElement/document.body

 确定文档总高度(取scrollHeight/clientHeight的最大值)：

     Max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

4.确定元素大小

   方法：getBoundingClientRect();返回一个矩形对象

  注意：IE8以前左上角坐标为（2，2），其他浏览器为（0.，0）

  函数：

  function getRect(element){
var scrollTop=document.documentElement.scrollTop;
var scrollLeft=document.documentElement.scro
acee
llLeft;
if(element.getBoundingClientRect){
if(typeof arguments.callee.offset!="number"){
var temp=document.createElement("div");
temp.style.cssText="position:absolute;top:0;left:0";
document.body.appendChild(temp);
arguments.callee.offset=-temp.getBoundingClientRect().top-scrollTop;
document.body.removeChild(temp);
temp=null;
}

var rect=element.getBoundingClientRect();
var offset=arguments.callee.offset;

return{
left:rect.left+offset,
right:rect.right+offset,
top:rect.top+offset,
bottom:rect.bottom+offset
};
}else{

var actualLeft=getElementLeft(element);
var actualTop=getElementTop(element);

return{
left:actualLeft-scrollLeft;
right:actualLeft+element.offsetWidth-scrollLeft;
top:actualTop-scrollTop;
bottom：actualTop+element.offsetHeight-scrollTop;
}

}

alert(getRect(document.getElementById("box")).left);