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>
