1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>dom的变化（样式）</title> 7 <style type="text/css"> 8 body{height: 2000px;} 9 #myDiv { 10 11 background-color: blue; 12 width: 100px; 13 height: 200px; 14 } 15 </style> 16 </head> 17 18 <body> 19 <div id="myDiv" style="background-color: red; border: 1px solid black"></div> 20 </body> 21 <script> 22 /* 23 任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。这个 style 对象是 CSSStyleDeclaration 的实例， 24 式。在 style 特性中指定的任何 CSS 属性都将表现为这个style 对象的相应属性。对于使用短划线（分隔不同的词汇，例如 background-image）的 CSS 属性名， 25 必须将其转换成驼峰大小写形式，才能通过 JavaScript 来访问。（float除外，详见：dom高级程序设计：Page(313)） 26 在标准模式下，所有度量值都必须指定一个度量单位。在混杂模式下，可以将style.width 设置为"20"，浏览器会假设它是"20px"； 27 28 * */ 29 /* 30 “DOM2级样式”规范还为 style 对象定义了一些属性和方法。这些属性和方法在提供元素的 style特性值的同时，也可以修改样式。下面列出了这些属性和方法。 31 cssText：如前所述，通过它能够访问到 style 特性中的 CSS 代码。 32 length：应用给元素的 CSS 属性的数量。 33 parentRule：表示 CSS 信息的 CSSRule 对象。本节后面将讨论 CSSRule 类型。 34 getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象。 35 getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回 36 "important"；否则，返回空字符串。 37 getPropertyValue(propertyName)：返回给定属性的字符串值。 38 item(index)：返回给定位置的 CSS 属性的名称。 39 removeProperty(propertyName)：从样式中删除给定属性。 40 setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先 41 权标志（"important"或者一个空字符串）。 42 * */ 43 var myDiv = document.getElementById("myDiv"); 44 var computedStyle = document.defaultView.getComputedStyle(myDiv, null); 45 console.log(computedStyle.backgroundColor); //rgb(255, 0, 0) 46 console.log(computedStyle.width); // "100px" 47 console.log(computedStyle.height); // "200px" 48 console.log(computedStyle.border); //1px solid rgb(0, 0, 0)[google的，不同浏览器不一样] 49 /*IE 不支持 getComputedStyle()方法，但它有一种类似的概念。在 IE 中，每个具有 style 属性的元素还有一个 currentStyle 属性。*/ 50 /* 51 操作样式表：详见：高阶js[dom2和dom3] 52 * */ 53 /* 54 元素大小 55 偏移量 56 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。 57 offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。 58 offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。 59 offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。 60 offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保存在 offsetParent 61 属性中。offsetParent 属性不一定与 parentNode 的值相等。例如，<td>元素的 offsetParent 是 62 作为其祖先元素的<table>元素，因为<table>是在 DOM 层次中距<td>最近的一个具有大小的元素。 63 所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。 64 65 客户区大小 66 元素的客户区大小（client dimension），指的是元素内容及其内边距所占据的空间大小。有关客户区 67 大小的属性有两个：clientWidth 和 clientHeight。 68 69 3. 滚动大小 70 scrollHeight：在没有滚动条的情况下，元素内容的总高度。 71 scrollWidth：在没有滚动条的情况下，元素内容的总宽度。 72 scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。 73 scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。 74 75 4. 确定元素大小 76 IE、Firefox 3+、Safari 4+、Opera 9.5及 Chrome为每个元素都提供了一个 getBoundingClientRect()方法。 77 这个方法返回会一个矩形对象，包含 4 个属性：left、top、right 和 bottom。这些属性给出了元素在页面中相对于视口的位置。 78 * */ 79 var sh= document.documentElement.scrollHeight; 80 var sw= document.documentElement.scrollWidth; 81 var ch= document.documentElement.clientHeight; 82 var cw= document.documentElement.clientWidth; 83 console.log(sh); 84 console.log(sw); 85 console.log(ch); 86 console.log(cw); 87 </script> 88 89 </html>