JavaScript之处理CSS

1. //操作样式类,实现方法是对元素的className属性进行操作
2. //className属性,相当于元素的class属性,但不可以对class属性直接操作
3. //因为这样会出现浏览器的兼用性问题(IE中设置class属性后,并不会主动重新渲染样式)
5. //添加样式类
6. //obj为要添加样式类的DOM对象,className为样式类名称
7. //className可为多个class,之间用空格分开
8. function addClass(obj, className){
9.     obj.className += " "+className;
10. }
12. //删除样式类
13. //obj为要删除样式类的DOM对象,className为样式类名称
14. //className可为多个class,之间用空格分开
15. function removeClass(obj, className){
16.     var classNameArray = className.split(" ");
17.     for(var i = 0; i < classNameArray.length; i++)
18.         obj.className = obj.className.replace(
19.             new RegExp(classNameArray[i], "g"), "");            
20. }
21.             
22. //读取、设置CSS属性
23. //当value参数为undefined时进行读取操作
24. //进行读取操作时,obj.style[property]不是obj样式属性的真实反映
25. //因为通过CSS文件渲染的属性并没有更新到style属性中
26. //在IE中我们可以通过currentStyle来获得
27. //在支持W3C标准的浏览器中(如FireFox),
28. //可以通过对document的defaultView属性的一些操作来获得
29. function css(obj, property, value){
30.     if(!value){
31.         return obj.style[property] || obj.currentStyle[property] || 
32.             document.defaultView.getComputedStyle(obj, null)[property];
33.     }else{
34.         obj.style[property] = value;
35.     }
36. }
38. //在实现自定义的工具提示和进行Windows窗口模拟等操作时,
39. //我们常需要获得元素的一些布局的信息,
40. //有时这些信息不能通过CSS的属性直接获得,比如要获取元素的width,
41. //若其width样式属性设置为auto,直接读取CSS属性就无法得到元素的实际width了.
43. //获取绝对的Top 
44. //当display为none时offsetParent为null
45. function getTop(obj){
46.     var res = 0;
47.     //任何显示元素都有offsetParent,即布局父元素
48.     //offsetTop是相对offsetParent的
49.     //而offsetParent相对与它的offsetParent也有offsetTop
50.     res += obj.offsetTop
51.     var p = obj.offsetparent;
52.     //要获得绝对的Top,就要不断的回溯offsetParent
53.     //直到offsetParent为body才停止
54.     //利用body.offsetParent是null特点来进行判定是否该结束回溯
55.     while(p){
56.         res += p.offsetTop;
57.         p = p.offsetParent;
58.     }
59.     return res;
60. }
62. //获取绝对的Left
63. function getLeft(obj){
64.     var res = 0;
65.     res += obj.offsetLeft
66.     var p = obj.offsetparent;
67.     while(p){
68.         res += p.offsetLeft;
69.         p = p.offsetParent;
70.     }
71.     return res;
72. }
74. //获取Width Height
75. //obj.offsetWidth 包括边框以内的宽度
76. //obj.offsetHeight 包括边框以内的长度
77. //obj.clientWidth 边框以内(不包括边框)的宽度
78. //obj.clientHeight 边框以内(不包括边框)的长度
79. //obj.clientTop  obj的client相对于obj的顶部偏移
80. //obj.clientWidth obj的client相对于obj的左部偏移
81.             
82. //获取窗口的文档显示区的高度和宽度
83. //IE中的window.innerHeight和window.innerWidth是未定义的
84. //所以要使用document.documentElement属性(HTML)或document.body属性(XHTML)
85. function getViewHeight(){
86.     return window.innerHeight || document.documentElement.clientHeight || 
87.         document.body.clientHeight;
88. }
89. function getViewWidth(){
90.     return window.innerWidth || document.documentElement.clientWidth || 
91.         document.body.clientWidth;
92. }
93.             
94. //MouseEvent的位置
95. //screenX 相对于屏幕
96. //screenY
97. //clientX 相对于接受鼠标事件的对象
98. //clientY