《JS高程（3）》DOM2和DOM3-样式、视口尺寸问题-第12章笔记(23)

来源：互联网发布：nginx 编译安装编辑：程序博客网时间：2024/05/19 04:53

HTML定义样式3种方法：

<link/>元素包含外部样式文件；
<style/>元素定义嵌入式样式；
以及使用style特性定义针对特定元素的样式。

“DOM2级样式”模块就这3种应用样式机制提供了套API。确定浏览器是否支持DOM2级定义的CSS能力：

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

访问元素的样式

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性，这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。

CSS属性 JavaScript属性 background-image style.backgroundImage color style.color display style.display foot-family style.fontFamily

多数情况下，都可以通过简单地转化属性名的格式来实现转换。其中一个不能直接转换的CSS属性就是float。

由于float是JavaScript中的保留字，因此不能用作属性名。

“DOM2级样式”规定样式对象上相应的属性名应是cssFloat;Firefox、Safri、Opera和Chrome都支持这个属性，而IE支持的则是styleFloat.

var myDiv = document.getElementById("myDiv");//设置背景颜色myDiv.style.backgroundColor = "red";//改变大小myDiv.style.width = "100px";myDiv.style.height= "100px";//指定胖子myDiv.style.border = "1px solid black";

通过style对象同样可以取得在style特性中指定的样式：

<div id = "myDiv" style = "background-color:blue; width:10px; height:25px"></div>

获取style特性中指定的样式信息：

alert(myDiv.style.backgroundColor); //"blue"alert(myDiv.style.width); //"10px"alert(myDiv.style.height); //"25px"

DOM样式属性和方法

“DOM2级样式”规范还为style对象定义了一些属性和方法：

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

通过cssText属性可以访问style特性中的CSS代码，在读取模式下cssText返回浏览器对style特性中CSS代码的内部表示。
在写模式下，赋给cssText的值会重写整个style特性的值。

//cssText改变元素中所有style的变化。myDiv.style.cssText = "width:25px; height:100px; background-color:green";alert(myDiv.style.cssText);

length属性的目的，是将其与item()方法配套使用，以便迭代在元素中定义的CSS属性。
使用length和item()时，style对象实际上就相当于一个集合，可以用”[]”来替代item来取得给定位置的CSS属性：

for (var i = 0, len = myDiv.length; i < len; i++){    alert(myDiv.style.item(i))//或者myDiv.style[i]}

取得CSS属性名为”background-color”，然后，通过getPropertyValue()中使用了取得的属性名进一步取得属性的值：

var prop, value, i, len;for(i = 0, len = myDiv.length; i < len ; i++){    prop = myDiv.style.item(i);    value = myDiv.style.getPropertyValue(prop);    alert(prop + ":" + value);}

getPropertyCSSValue()方法返回：cssValueType和cssText.
其中cssText属性的值与getPropertyValue（）返回的值相同，而cssValueType属性则是一个数值常量:

0：继承的值 1：基本的值 2：值列表 3：自定义的值

var prop, value, i, len;for(i=0, len=myDiv.style.length; i < len ; i++){    prop = myDiv.style.item(i);    value = myDiv.style.getPropertyCSSValue(prop);    alert(prop + ":" + value.cssText + "(" + value.cssValueType + ")"); }

removeProperty()方法，用于移除一个属性，意味着将会为该属性应用默认的样式（从其他层叠样式表来）：

myDiv.style.removeProperty("border");

计算的样式

“DOM2级样式”增强了document.defaultView,提供了getComputedStyle()方法，接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如：“：after”可为空）。
返回一个CSSStyleDeclaration对象（与style属性的类型相同）：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Computed Styles Example</title>    <style type = "text/css">        #myDiv{            background-color:blue;            width:100px;            height:200px;        }    </style></head><body>    <div id="myDiv" style="background-color: red; border: 1px solid black"></div></body></html>

style设置了backgroundColor和border，没有设置width和height
取得这个元素计算后的样式：

var myDiv = document.getElementById("myDiv");var computedStyle = document.defaultView.getComputer(myDiv, null);alert(computedStyle.backgroundColor); // "red"alert(computedStyle.width); //"100px"alert(computedStyle.height); // "200px"alert(computedStyle.border); // 在某些浏览器中是"1px solid black"

操作样式表

CSSStyleSheet类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。
这两个元素本身分别由HTMLLinkElement和HTMLStyleElement类型表示的。

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

CSSStyleSheet继承自StyleSheet,后者可以作为一个基础接口来定义非CSS样式表。从StyleSheet接口继承而来的属性：

disabled：表示样式表是否被禁用的布尔值，可读/写，值为true可以禁用样式表 href：如果样式表是通过< link> 包含的，则是样式表的URL。 media：当前样式表支持的所有媒体类型的集合。 ownerNode：指向拥有当前样式表的节点的指针，样式表可能是在HTML中通过< link >或< style />引入的 title： ownerNode中title属性的值 type：表示样式表类型的字符串。 cssRules：样式表中包含的样式规则的集合

CSS规则

CSSRule对象表示样式表中的每一条规则：

cssText：返回整条规则对应的文本。 parentStyleSheet：当前规则所属的样式表。 selectorText：返回当前规则的选择符文本。 style：一个CSSStyleDeclaration对象，可以通过他设置和取得规则中特定的样式值。 type：表示规则类型的常量值。对于样式规则，值为1。

常用属性：cssText、selectorText和style。
cssText属性与style.cssText属性类似，但并不相同。
cssText包含选择符文本和围绕样式信息的花括号，后者只包含样式信息。
大多数情况下，使用style属性就可以满足所有操作样式规则的需求了。
可以通过他读取和修改规则中的样式信息：

div.box{    background-color:blue;    width:100px;    height:200px;}

取得上面样式表中的样式规则的各种信息：

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.backgroundColoe); //"blue"alert(rule.style.width); // "100px"alert(rule.style.height); //"200px"

修改样式信息：

var sheet = document.styleSheet[0];var rules = sheet.cssRules || sheet.rules;  //取得规则列表var rule = rules[0];rule.style.backgroundColor = "red"

创建规则

DOM规定，要向现有样式表中添加新规则，需要使用insertRule()方法，参数：规则文本和表示在哪里插入规则的索引。

//DOM方法//样式表中的第一条规则sheet.insetRule("body { background-color: silver}", 0);

IE不支持
跨浏览器方法：

function insertRule(sheet, selector, cssText, position){    if (sheet.insertRule){        sheet.insertRule(selectorText + "(" + cssText + ")", position);    }else if (sheet.addRule){        sheet.addRule(selectorText, cssText, position);    }}

调用函数的示例代码：

insertRule(document.styleSheet[0], "body", "background-color: silver", 0);

这种添加方法比较繁琐。

删除规则

从样式表中删除规则的方法是deletRule()。这个方法接受一个参数：要删除的规则位置。

sheet.deletRule(0); //DOM方法

IE支持的类似方法叫removeRule()，使用方法相同：

sheet.removeRule(0);//仅对IE有效

扩浏览器删除规则的函数，第一个参数是要参数的样式表，第二个参数是要删除的规则的索引：

function deleteRule(sheet, index){    if (sheet.deleteRule){        sheet.deleteRule(index);    }else if(sheet.removeRule){        sheet.removeRule(index);    }}

调用函数的方式：

deleteRule(document.styleSheets[0], 0);

删除规则可能会影响CSS样式表的层叠效果，慎用。

元素大小

DOM中没有规定如何确定页面中元素的大小，IE率先引入了一些属性，目前，所有主要的浏览器都已经支持这些属性。

偏移量

偏移量：元素在屏幕上占用的所有可见的空间。
元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意：不包括外边距）。通过下列4个属性可以取得元素的偏移量：

offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度 offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度 offsetTop：元素的上外边框至包含元素的上内边框的像素距离 offsetLeft：元素的左外边框至包含元素的左内边框的像素距离

这里写图片描述

offsetLeft，offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。

offsetParent属性不一定与parentNode的值相等。

例如：<td>元素的offsetParent是作为其祖先元素的<table>元素，因为<table>是在DOM层次中距<td>最近的一个具有大小的元素。

某个元素在页面上的偏移量，是将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素，就可以得到一个准确的值。

例子：取得元素的左和上偏移量

function getElementLeft(element){    var actualLeft = element.offsetLeft;    var current = element.offsetParent;    while(current !== null){        actualLeft += current.offsetLeft;        current = current.offsetParent;    }    return actuaLeft;}function getElementTop(element){    var actualTop += current.offsetTop;    var current = current.offsetParent;    while (current != null){        actualTop += current.offsetTop;        current = current.offsetParent;    }    return actualTop;}

这两个函数利用offsetParent属性在DOM层次中逐级向上回溯，将每个层次中的偏移量属性合计到一块。

对于简单的CSS布局的页面，这两个函数可以得到非常精确的结果。
对于使用表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，因此值就不精确了。

所有的元素都包含在<div>中，而这些<div>元素的offsetParent又是<body>元素，所以getElementLeft()与getElementTop()会返回与offsetLeft和offsetTop相同的值。

客户区大小

元素的客户区大小(client dimension)，指的是元素内容及其内边距所占的空间大小。有关客户区大小的属性有两个：clientWidth和clientHeight。

clientWidth属性：元素内容宽度加上左右内边距宽度 clientHeight属性：元素内容高度加上上下内边距宽度

这里写图片描述

客户区大小就是元素内部的空间大小，滚动条占用的空间不计算在内。
要确定浏览器视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight。

function getViewport(){    // 检查document.compatMode属性，以确定浏览器是否运行在混杂模式    if (document.compatMode == "BackCompat"){        return(            width: document.body.clientWidth,            height: document.body.clientHeight        );    }else{        return{        //documentElement 属性可返回文档的根节点            width: document.documentElement.clientWidth,            height: document.documentElement.clientHeight        };    }}

滚动大小

滚动大小：包含滚动内容的元素的大小。

scrollHeight：在没有滚动条的情况下，元素内容的总高度 scrollWidth：在没有滚动条的情况下，元素内容的总宽度 scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。 scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

这里写图片描述

scrollHeight和scrollWidth主要用于确定元素内容的实际大小。

通常认为<html>元素是在Web浏览器的视口中滚动的元素。带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。

对于不包含滚动条的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系并不十分清晰。在这种情况下，基于document.documentElement查看这些属性会在不同浏览器间发现一些不一致性问题：

1.Firefox中这两组属性始终都是相等的，但大小代表的是文档内容区域的实际尺寸，而非是视口的尺寸。

2.Opera、Safari3.1及更高版本、Chrome中的这两组属性是由差别的，其中scrollWidth和scrollHeight等于视口大小，而clientWidth和clientHeight等于文档区域内容的大小。

3.IE（在标准模式）中的这两组属性不相等，其中scrollWidth和scrollHeight等于文档内容区域的大小，而clientWidth和clientHeight等于视口的大小。

在确定文档的总高度时（包括基于视口的最小高度），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下得到精确的结果：

//对于运行在混杂模式下的IE，则需要用document.body代替document.documentElementvar docHeight = Math.max(document.documentElement.scrollHeight, documentElement.clientHeight);var docWidth = Math.max(document.documentElement.scrollWidth, documentElement.clientWidth);

通过scrollLeft和scrollTop属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置。

scrollLeft = 0, scrollTop = 0; 元素未滚动 scrollLeft = 0, scrollTop > 0; 元素垂直滚动 scrollLeft > 0, scrollTop = 0; 元素水平滚动

这两个属性都是可以设置的，因此将元素的scrollTop和scrollLeft设置为0，就可以重置元素的滚动位置。

检测元素是否位于顶部，如果不是就将其回滚到顶部：

function scrollToTop(element){    if (element.scrollTop != 0){        element.scrollTop = 0;    }}

确定元素大小

IE、Firefox3+、Safari4+、Opera9.5及Chrome为每个元素都提供了一个getBoundingClientRect()方法。
这个方法返回一个矩形对象，包含4个属性：left、top、right和bottom。这些属性给出了元素在页面中相对于视口的位置。但是，浏览器的视线稍微不同，IE8及更早版本认为文档在左上角坐标是（2， 2），而其他浏览器包括IE9则将传统的(0，0)作为起点坐标。
因此，需要在一开始检查一下位于（0, 0）处的元素的位置，在IE8及更早版本中，会返回（2，2），在其他浏览器中会返回（0, 0）：

function getBoundingClientRect(element){    //检测属性是否有定义，没有则定义一个，    if(typeof arguments.callee.offset != "number"){        var scrollTop = document.documentElement.scrollTop;        //创建一个临时元素并定位在（0,0）        var temp = document.createElement("div");        temp.style.cssText = "position:absolute; left:0; top:0;";        document.body.appendChild(temp);        //减去视口的scrollTop,防止调用这个函数式敞口被滚动，offset会被设置为新元素上坐标的负值        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    };}

对于不支持getBoundingClientRect()的浏览器，可以通过其他手段取得相同的信息。一般来说，right和left的差值与offsetWidth的值相等，而bottom和top的差值与offsetHeight相等。而且，left和top属性大致等于使用本章前面定义的getElementLeft()和getElementTop()函数取得的值。跨浏览器的函数：

function getBoundingClientRect(element){    var scrollTop = document.documentElement.scrollTop;    var scrollLeft = document.documentElement.scrollLeft;    if(element.getBoundingClientRect(element)){        var temp = document.createElement("div");        temp.style.cssText = "position:absolute; left:0; top: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: aotualLeft - scrollLeft,        right: actualLeft + element.offsetWidth - scrollLeft,        top: actualTop - scrollTop,        bottom: actualTop + element.offsetHeight - scrollTop    }}

0 0