2025-03-25

在看瞭《精通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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *