在看瞭《精通javascript》一書中,裡面講瞭很多工具函數,先整理一部分。
主要在javascript和css交互的代碼:
[javascript]
1. function text(e) {
2. //獲取元素文本內容
3. var t = "";
4. e = e.childNodes || e;
5. for (var i = 0, count = e.length; i < count; i++) {
6. t += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
7. }
8. return t;
9. }
10. function attr(elem, name, value) {
11. //獲取或設置元素屬性值
12. if (!name || name.constructor != String) return "";
13. name = { "for": "htmlFor", "class": "className"}[name] || name;
14. if (typeof value != "undefined") {
15. elem[name] = value;
16. if (elem.setAttribute) {
17. elem.setAttribute(value);
18. }
19. }
20. return elem[name] || elem.getAttribute(name) || "";
21. }
22. function stopDefault(e) {
23. //防止默認瀏覽器行為
24. if (e && e.preventDefault) {
25. e.preventDefault();
26. }
27. else {
28. window.event.returnValue = false;
29. }
30. return false;
31. }
32. function stopBubble(e) {
33. //阻止事件冒泡
34. if (e && e.stopPropagation) {
35. e.stopPropagation();
36. }
37. else {
38. window.event.cancelBubble = true;
39. }
40. }
41. //調用示例<a href="#" onclick=" alert('ok'); stopBubble(event);">demo</a>
42. function pageX(elem) {
43. //獲取元素的水平位置
44. return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
45. }
46. function pageY(elem) {
47. //獲取元素的垂直位置
48. return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
49. }
50. function parentX(elem) {
51. //獲取元素相對於父親的水平位置
52. return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) – pageX(elem.parentNode);
53. }
54. function parentY(elem) {
55. //獲取元素相對於父親的垂直位置
56. return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) – pageY(elem.parentNode);
57. }
58. function resetCss(elem, prop) {
59. //設置css一組屬性,它可以恢復到原有的設置
60. var old = {};
61. for (var i in prop) {
62. old[i] = elem.style[i];
63. elem.style[i] = prop[i];
64. }
65. return old;
66. }
67. function restoreCss(elem, prop) {
68. for (var i in prop) {
69. elem.style[i] = prop[i];
70. }
71. }
72. function getStyle(elem, styleName) {
73. if (elem.style[styleName]) {//內聯樣式
74. return elem.style[styleName];
75. }
76. else if (elem.currentStyle) {//IE
77. return elem.currentStyle[styleName];
78. }
79. else if (document.defaultView && document.defaultView.getComputedStyle) {//DOM
80. styleName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
81. var s = document.defaultView.getComputedStyle(elem, '');
82. return s && s.getPropertyValue(styleName);
83. }
84. else {//other,for example, Safari
85. return null;
86. }
87. }
88. function fullHeight(elem) {
89. //查找元素可能的高度
90. //如果元素顯示那麼使用offsetHeight就可以得到高度,如果沒有offsetHeight,則使用getHeight()
91. if (getStyle(elem, "display") != "none") {
92. return elem.offsetHeight ;
93. }
94. var oldcss = resetCss(elem, { display: "", visibility: "hidden", position: "absolute" });
95. var height = elem.clientHeight ;
96. restoreCss(elem, oldcss);
97. return height;
98. }
99. function fullWidth(elem) {
100. //查找元素可能的高度
101. //如果元素顯示那麼使用offsetWidth就可以得到高度,如果沒有offsetWidth,則使用getWidth()
102. if (getStyle(elem, "display") != "none") {
103. return elem.offsetWidth ;
104. }
105. var oldcss = resetCss(elem, { display: "", visibility: "hidden", position: "absolute" });
106. var width = elem.clientWidth ;
107. restoreCss(elem, oldcss);
108. return width;
109. }
110. function setOpacity(elem, level) {
111. //這是元素透明度
112. if (elem.filiters) {
113. elem.style.filters = "alpha(opacity='" + level + "')";
114. }
115. else {
116. elem.style.opacity = level / 100;
117. }
118. }
119. function cursorX(e) {
120. //獲取光標水平位置
121. e = e || window.event;
122. //先檢查非IE瀏覽器位置再檢查IE位置
123. return e.pageX || e.clientX + document.body.scrollLeft;
124. }
125. function cursorY(e) {
126. //獲取光標垂直位置
127. e = e || window.event;
128. return e.pageY || e.clientY+ document.body.scrollTop;
129. }
130. function scrollX() {
131. //確定瀏覽器水平滾動條位置
132. var de = document.documentElement;
133. return self.pageXOffset || (de && de.scrollLeft) || document.body. scrollLeft;
134. }
135. function scrollY() {
136. //確定瀏覽器垂直滾動條位置
137. var de = document.documentElement;
138. return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
139. }
140. function windowHeight() {
141. //獲取視窗的高度
142. var de = document.documentElement;
143. return self.innerHeight || (de || de.clientHeight) || document.body.clientHeight;
144. }
145. function windowWidth() {
146. //獲取視窗的高度
147. var de = document.documentElement;
148. return self.innerWidth || (de || de.clientWidth) || document.body.clientWidth;
149. }
作者:dz45693