自己封装的js工具

Posted 2020-12-29 ghostcatcg

 1 // 封装函数insertAfter;功能类似insertBefore();
 2 
 3 var div = document.getElementsByTagName("div")[0];
 4 var span = document.createElement("span");
 5 var a = document.getElementsByTagName("a")[0];
 6 div.appendChild(span);
 7 
 8 htmlElement.prototype.insertAfter = function(tag, now){
 9     if(now.nextSibling.nextSibling){
10         this.insertBefore(tag, now.nextSibling.nextSibling)
11     }else{
12         this.appendChild(tag)
13     }
14 
15 };
16 div.insertAfter(span, a);
17 
18 // 将目标节点内节点反转
19 
20 var div = document.getElementsByTagName("div")[0];
21 HTMLElement.prototype.reverse = function () {
22     var len = this.children.length;
23     console.log(len);
24     while(len){
25         this.insertBefore(this.lastChild,this.firstChild);
26         len --;
27     }
28 }
29 div.reverse()
30 
31 // 获取窗口滚动条的兼容性方法
32 function getScrollOffset() {
33     if(window.pageXOffset){
34         return {
35             x : window.pageXOffset,
36             y : window.pageYOffset
37         }
38     }else{
39         return {
40             x : document.body.scrollLeft + document.documentElement.scrollLeft,
41             x : document.body.scrollTop + document.documentElement.scrollTop,
42 
43         }
44     }
45 }
46 
47 // 获取窗口尺寸的兼容性方法
48 function getViewportOffset() {
49     if(window.innerWidth){
50         return {
51             w : window.innerWidth,
52             w : window.innerHeight
53         }
54     }else{
55         if(documen.compatMode === "BackCompat"){
56             return {
57                 w : document.body.clientWidth,
58                 h : document.body.clientHeight
59             }
60         }else {
61             return {
62                 w : document.documentElement.clientWidth,
63                 h : document.documentElement.clientHeight
64             }
65         }
66     }
67 }