兼容代码common

迈不过友情╰ 2021-12-16 19:31 133阅读 0赞

function ver(id) \{

return document.getElementById(id);

//兼容性

//设置任意的标签中间的任意文本内容

function setInnerText(element,text) \{

if(typeof element.textContent=="undefined")\{

element.innerText=text;

\}else \{

element.textContent=text;

//获取任意的标签中间的文本内容

function getInnerText(element) \{

if(typeof element.textContent=="undefined")\{

return element.innerText;

\}else \{

return element.textContent;

//封装节点兼容性代码

//获取最后一个父级元素的第一个子级元素

function getFirstElement(element) \{

if (element.firstElementChild) \{

return element.firstElementChild;

\} else \{

var node = element.firstChild;

while (node && node.nodeType != 1) \{

node = node.nextSibling;

return node;

//获取最后一个父级元素的最后一个子级元素

function getLastElementChild(element) \{

if(element.lastElementChild)\{

return element.lastElementChild;

\}else \{

var node=element.lastChild;

while (node&&node.nodeType!=1)\{

node=node.previousSibling;

return node;

//获取某个元素的所有兄弟元素

function getSiblings(element) \{

if (!element)return;

var elements = \[\];

var ele = element.previousSibling;

while (ele) \{

if (ele.nodeType === 1) \{

elements.push(ele);

ele = ele.previousSibling;

ele = element.nextSibling;

while (ele) \{

if (ele.nodeType === 1) \{

elements.push(ele);

ele = ele.nextSibling;

return elements;

//获取某个元素的后一个兄弟元素

function getNextElement(element) \{

if (element.nextElementSibling) \{

return element.nextElementSibling

\} else \{

var node = element.nextSibling;

while (node && node.nodeType != 1) \{

node = node.nextSibling;

return node;

//绑定事件兼容代码

//为任意元素.绑定任意的事件，任意的元素，事件的类型，事件处理函数

function addEventlistener(element,type,fn) \{

//判断浏览器是否支持这个方法

if(element.addEventListener)\{

element.addEventListener=(element,type,false);

\}else if(element.attachEvent)\{

element.attachEvent("on"+type,fn);

\}else \{

element\["on"+type\]=fn;

//解绑事件的兼容

//为任意的一个元素，解绑对应的事件

function removeEventListener(element,type,fnName) \{

if(element.removeEventListener)\{

element.removeEventListener(type,fnName,false);

\}else if(element.detachEvent)\{

element.detachEvent("on"+type,fnName);

\}else \{

element\["on"+type\]=null;

//计算后的样式属性---- 一个元素的任意的一个样式属性值

function getStyle(element,attr) \{

//判断这个浏览器是否支持这个方法

return window.getComputedStyle?window.getComputedStyle(element,null)\[attr\]:element.currentStyle\[attr\];

//匀速动画

function animate(element,json,fn) \{ //element--元素 attr--属性名字 target--目标位置

//清理定时器

clearInterval(element.timeId);

element.timeId=setInterval(function () \{

var flag=true;//默认，假设，全部到达目标

for(var attr in json)\{

//判断这个属性中attr中是不是opacity

if (attr=="opacity")\{

//获取元素的当前的透明度，当前的透明度放大100倍

var current=getStyle(element,attr)\*100;

//目标的透明度放大100倍

var target=json\[attr\]\*100;

var step=(target-current)/10;

step=step>0?Math.ceil(step):Math.floor(step);

current+=step;

element.style\[attr\]=current/100;

\}else if(attr=="zIndex")\{ //判断这个属性attr中是不是zIndex

//层级改变就是直接改变这个属性的值

element.style\[attr\]=json\[attr\];

\}else \{

//获取元素当前位置

var current=parseInt(getStyle(element,attr));//数字类型

//当前的属性对应的目标值

var target=json\[attr\];

//移动的步数

var step=(target-current)/10;

step=step>0?Math.ceil(step):Math.floor(step);

current+=step;

element.style\[attr\]=current+"px";

//判断是否到达目标

if(current!=target)\{

flag=false;

if(flag)\{

//清理计时器

clearInterval(element.timeId);

//回调函数,所有属性达到目标后才能使用

if(fn)\{

fn();

//测试代码

console.log("目标位置:"+target+",当前位置:"+current+",每次移动的步数:"+step)

\},20);

//兼容代码

//把代码放在一个对象中

var evt=\{

//window.event和事件参数对象e的兼容

getEvent:function (evt) \{

return window.event||evt;

\},

//可视区域横坐标的兼容代码

getClientX:function (evt) \{

return this.getEvent(evt).clientX;

\},

//可视区域纵坐标的兼容代码

getClientY:function (evt) \{

return this.getEvent(evt).clientY;

\},

//页面向左卷曲出去的横坐标

getScrollLeft:function () \{

return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;

\},

//页面向上卷曲出去的纵坐标

getScrollTop:function () \{

return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;

\},

//相对于页面的横坐标（pageX或者是clientX+scrollLeft）

getPageX:function (evt) \{

return this.getEvent(evt).pageX?this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();

\},

//相对于页面的纵坐标（pageY或者是clientY+scrollTop）

getPageY:function (evt) \{

return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();

\};

//获取的是页面向上或者向左卷曲出去的距离的值,返回的是对象

function getScroll() \{

return \{

top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0,

left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft||0

\};

//返回当前浏览器是什么类型的浏览器

function userBrowser()\{

var browserName=navigator.userAgent.toLowerCase();

if(/msie/i.test(browserName) && !/opera/.test(browserName))\{

console.log("IE");

\}else if(/firefox/i.test(browserName))\{

console.log("Firefox");

\}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))\{

console.log("Chrome");

\}else if(/opera/i.test(browserName))\{

console.log("Opera");

\}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)))\{

console.log("Safari");

\}else\{

console.log("不知道什么鬼!");

//foreach的兼容代码

if (!Array.prototype.forEach) \{

Array.prototype.forEach = function(callback, thisArg) \{

var T, k;

if (this == null) \{

throw new TypeError(' this is null or not defined');

// 1. Let O be the result of calling toObject() passing the

// |this| value as the argument.

var O = Object(this);

// 2. Let lenValue be the result of calling the Get() internal

// method of O with the argument "length".

// 3. Let len be toUint32(lenValue).

var len = O.length >>> 0;

// 4. If isCallable(callback) is false, throw a TypeError exception.

// See: http://es5.github.com/\#x9.11

if (typeof callback !== "function") \{

throw new TypeError(callback + ' is not a function');

// 5. If thisArg was supplied, let T be thisArg; else let

// T be undefined.

if (arguments.length > 1) \{

T = thisArg;

// 6. Let k be 0

k = 0;

// 7. Repeat, while k < len

while (k < len) \{

var kValue;

// a. Let Pk be ToString(k).

// This is implicit for LHS operands of the in operator

// b. Let kPresent be the result of calling the HasProperty

// internal method of O with argument Pk.

// This step can be combined with c

// c. If kPresent is true, then

if (k in O) \{

// i. Let kValue be the result of calling the Get internal

// method of O with argument Pk.

kValue = O\[k\];

// ii. Call the Call internal method of callback with T as

// the this value and argument list containing kValue, k, and O.

callback.call(T, kValue, k, O);

// d. Increase k by 1.

k++;

// 8. return undefined

\};

转载于:https://www.cnblogs.com/lujieting/p/10509808.html

兼容代码common

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Common

相关兼容ie浏览器代码处理

相关使得C/C++代码兼容支持OC代码的方法

相关梳理caffe代码common(八)

相关【兼容IE】简单的 IE9 以上兼容ES6语法、箭头函数，代码

相关 js 为元素绑定事件兼容代码

相关线性渐变兼容性代码

相关兼容代码common

相关 commons-lang

相关解决360等等浏览器兼容模式解析不兼容代码