1010cc时时彩标准版 > 1010cc时时彩标准版 > 1010cc时时彩标准版js获取成分在页面包车型大巴相

原标题:1010cc时时彩标准版js获取成分在页面包车型大巴相

浏览次数:189 时间:2019-11-25

vargetXY=function(){ //判断是否是IE if(document.documentElement.getBoundingClientRect){ //注1 returnfunction{ varbox=el.getBoundingClientRect(); varrootNode=el.ownerDocument; return[box.left Y.Dom.getDocumentScrollLeft,box.top Y.Dom.getDocumentScrollTop]; }; }else{ returnfunction{ varpos=[el.offsetLeft,el.offsetTop]; varparentNode=el.offsetParent; //判断是否在Safari下,节点是否为absolute, //并且父元素是否为body //注2. varaccountForBody=(isSafari&& Y.Dom.getStyle=='absolute'&& el.offsetParent==el.ownerDocument.body); //如果父元素不是自身 if{ while{ pos[0] =parentNode.offsetLeft; pos[1] =parentNode.offsetTop; if(!accountForBody&&isSafari&& Y.Dom.getStyle(parentNode,'position') =='absolute'){ accountForBody=true; } parentNode=parentNode.offsetParent; } } // 还是针对Safari的 if{//safaridoublesinthiscase pos[0]-=el.ownerDocument.body.offsetLeft; pos[1]-=el.ownerDocument.body.offsetTop; } parentNode=el.parentNode; //accountforanyscrolledancestors while(parentNode.tagName&& !patterns.ROOT_TAG.test { //workaroundoperainline/tablescrollLeft/Topbug //注3. if(Y.Dom.getStyle .search(/^inline|table-row.*$/i)){ pos[0]-=parentNode.scrollLeft; pos[1]-=parentNode.scrollTop; } parentNode=parentNode.parentNode; } returnpos; }; } }()//NOTE:Executingforloadtimebranching注.有关IE的getBoundingClientRect方法,可以参考这里。 注.Safari的BUG,详细情况参见这里。 注.参见老外的原话: "-RemoveparentscrollUNLESSthatparentisinlineoratable toworkaroundOperainline/tablescrollLeft/Topbug" FixedinOpera9.5.(also,Opera9.5supportsgetBoundingClientRect andgetClientRects.)最后,有关更多DOM的兼容性,可以参看PPK的总结。

在js中我们要获取元素在页面的位置算法很简单的,只要是 元素在页面的位置=该元素相对浏览器视窗的位置 浏览器滚动条的值说可以了,绝对位置也差不多,下面我以实例给大家介绍。

  1 
  2  // 说明:用 Javascript 获取指定页面元素的位置 
  3 function getElementPos(elementId) {
  4     var ua = navigator.userAgent.toLowerCase();
  5     var isOpera = (ua.indexOf('opera') != -1);
  6     var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof 
  7     var el = document.getElementById(elementId);
  8     if (el.parentNode === null || el.style.display == 'none') {
  9         return false;
 10     }
 11     var parent = null;
 12     var pos = [];
 13     var box;
 14     if (el.getBoundingClientRect)    //IE 
 15     {
 16         box = el.getBoundingClientRect();
 17         var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
 18         var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
 19         return { x: box.left   scrollLeft, y: box.top   scrollTop };
 20     }
 21     else if (document.getBoxObjectFor)    // gecko 
 22     {
 23         box = document.getBoxObjectFor(el);
 24         var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) : 0;
 25         var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) : 0;
 26         pos = [box.x - borderLeft, box.y - borderTop];
 27     }
 28     else    // safari & opera 
 29     {
 30         pos = [el.offsetLeft, el.offsetTop];
 31         parent = el.offsetParent;
 32         if (parent != el) {
 33             while (parent) {
 34                 pos[0]  = parent.offsetLeft;
 35                 pos[1]  = parent.offsetTop;
 36                 parent = parent.offsetParent;
 37             }
 38         }
 39         if (ua.indexOf('opera') != -1
 40     || (ua.indexOf('safari') != -1 && el.style.position == 'absolute')) {
 41             pos[0] -= document.body.offsetLeft;
 42             pos[1] -= document.body.offsetTop;
 43         }
 44     }
 45     if (el.parentNode) { parent = el.parentNode; }
 46     else { parent = null; }
 47     while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors 
 48         pos[0] -= parent.scrollLeft;
 49         pos[1] -= parent.scrollTop;
 50         if (parent.parentNode) { parent = parent.parentNode; }
 51         else { parent = null; }
 52     }
 53     return { x: pos[0], y: pos[1] };
 54 }
 55 
 56 function $(objid) { return document.getElementById(objid); }
 57 
 58 String.prototype.Trim = function () { return this.replace(/(^s*)|(s*$)/g, ""); }
 59 String.prototype.LTrim = function () { return this.replace(/(^s*)/g, ""); }
 60 String.prototype.RTrim = function () { return this.replace(/(s*$)/g, ""); }
 61 
 62 String.prototype.endWith = function (str) {
 63     if (str == null || str == "" || this.length == 0 || str.length > this.length)
 64         return false;
 65     if (this.substring(this.length - str.length) == str)
 66         return true;
 67     else
 68         return false;
 69     return true;
 70 }
 71 
 72 String.prototype.startWith = function (str) {
 73     if (str == null || str == "" || this.length == 0 || str.length > this.length)
 74         return false;
 75     if (this.substr(0, str.length) == str)
 76         return true;
 77     else
 78         return false;
 79     return true;
 80 }
 81 
 82 function contains(string, substr, isIgnoreCase) {
 83     if (isIgnoreCase) {
 84         string = string.toLowerCase();
 85         substr = substr.toLowerCase();
 86     }
 87     var startChar = substr.substring(0, 1);
 88     var strLen = substr.length;
 89     for (var j = 0; j < string.length - strLen   1; j ) {
 90         if (string.charAt(j) == startChar)//如果匹配起始字符,开始查找
 91         {
 92             if (string.substring(j, j   strLen) == substr)//如果从j开始的字符与str匹配,那ok
 93             {
 94                 return true;
 95             }
 96         }
 97     }
 98     return false;
 99 }
100 
101 
102 //----------------------------- 判断浏览器 -------------------------
103 function myBrowser() {
104     var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
105     var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
106     var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
107     var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
108     var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") < 1; //判断是否Safari浏览器
109     var isChrome = userAgent.indexOf("Chrome") > -1; //判断是否Chrome浏览器
110     if (isIE) {
111         var IE5 = IE55 = IE6 = IE7 = IE8 = false;
112         var reIE = new RegExp("MSIE (\d \.\d );");
113         reIE.test(userAgent);
114         var fIEVersion = parseFloat(RegExp["$1"]);
115         IE55 = fIEVersion == 5.5;
116         IE6 = fIEVersion == 6.0;
117         IE7 = fIEVersion == 7.0;
118         IE8 = fIEVersion == 8.0;
119         if (IE55) { return "IE55"; }
120         if (IE6) { return "IE6"; }
121         if (IE7) { return "IE7"; }
122         if (IE8) { return "IE8"; }
123     }
124     if (isFF) { return "FF"; }
125     if (isOpera) { return "Opera"; }
126     if (isSafari) { return "Safari"; }
127     if (isChrome) { return "Chrome"; }
128 } 
129 

function getElementPos(elementId) {

我们可以先用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置 {这个方法返回的是一个对象,即Object,该对象具有4个属性:top,left,right,bottom }

 

var ua = navigator.userAgent.toLowerCase();

然后再计算浏览器滚动条的值,2个值相加即可得到元素在页面的位置!

 

var isOpera = (ua.indexOf('opera') != -1);

假如我们现在要获得元素obj在页面的左上角坐标位置,计算公式如下:

新增加:获取参数方法

var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof

 代码如下

// 说明:Javascript 获取链接(url)参数的方法 
function getQueryString(name) {     // 如果链接没有参数,或者链接中不存在我们要获取的参数,直接返回空     
    if (location.href.indexOf("?") == -1 || location.href.indexOf(name   '=') == -1)
    { return ''; }
    // 获取链接中参数部分 
    var queryString = location.href.substring(location.href.indexOf("?")   1);
    // 分离参数对 ?key=value&key2=value2 
    var parameters = queryString.split("&");
    var pos, paraName, paraValue;
    for (var i = 0; i < parameters.length; i  ) {
        // 获取等号位置   
        pos = parameters[i].indexOf('=');
        if (pos == -1) { continue; }
        // 获取name 和 value 
        paraName = parameters[i].substring(0, pos);
        paraValue = parameters[i].substring(pos   1);
        // 如果查询的name等于当前name,就返回当前值,同时,将链接中的 号还原成空格 
        if (paraName == name) {
            return unescape(paraValue.replace(/ /g, " "));
        } 
    }
    return '';
};

var el = document.getElementById(elementId);

复制代码

  

if(el.parentNode === null || el.style.display == 'none') {

//chrome不能识别document.documentElement用document.body兼容
var sTop=document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
var sLeft= document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;

 

  return false;

该obj元素在页面的Left值=obj.getBoundingClientRect().left sLeft 

 

}      

该obj元素在页面的Top值=obj.getBoundingClientRect().top sTop  

 

var parent = null;

注:getBoundingClientRect()方法方法之前只有ie支持,现在FF3.0 和Opera9.5 都已经支持该方法,可以说在获得页面元素位置上效率能有很大的提高!

var pos = [];     

那么我们要如何获取绝对位置呢

var box;     

 代码如下

if(el.getBoundingClientRect)    //IE

复制代码

{         

function findPosX(obj) {
var curleft = 0;

   box = el.getBoundingClientRect();

if (obj.offsetParent) { //返回父类元素,大多说offsetParent返回body
while (obj.offsetParent) {//遍历所有父类元素
curleft = obj.offsetLeft;//当前元素的左边距
obj = obj.offsetParent;
}
} else if (obj.x) curleft = obj.x;
return curleft;
}

  var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

平时我用这种累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层 的办法 在实际工作中遇到一些问题 就是元素有border 时 会有问题会发生计算出的位置不是很准确的问题尤其在IE下和其他浏览器计算位置不对

  var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

下面大家可看个实例

  return {x:box.left scrollLeft, y:box.top scrollTop};

 代码如下

}else if(document.getBoxObjectFor)    // gecko    

复制代码

{

function getElementPos(elementId)
{
    var ua = navigator.userAgent.toLowerCase();
    var isOpera = (ua.indexOf('opera') != -1);
    var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
    var el = document.getElementById(elementId);
   
    if(el.parentNode === null || el.style.display == 'none')
    {
        return false;
    }
   
        
    var parent = null;
    var pos = [];    
    var box;
        
    if(el.getBoundingClientRect)    //IE
    {        
        box = el.getBoundingClientRect();
        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
        return {x:box.left scrollLeft, y:box.top scrollTop};
    }
    else if(document.getBoxObjectFor)    // gecko   
    {
        box = document.getBoxObjectFor(el);
        var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
        var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
        pos = [box.x - borderLeft, box.y - borderTop];
    }
    else    // safari & opera   
    {
        pos = [el.offsetLeft, el.offsetTop]; 
        parent = el.offsetParent;  
         
        if (parent != el)
        {
            while (parent)
            { 
                pos[0] = parent.offsetLeft;
                pos[1] = parent.offsetTop;
                parent = parent.offsetParent;
            } 
        }
 
        if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))
        {
            pos[0] -= document.body.offsetLeft;
            pos[1] -= document.body.offsetTop;        
        }   
    }
                
    if (el.parentNode)
    {
        parent = el.parentNode;
    }
    else
    {
        parent = null;
    }
   
    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
    { // account for any scrolled ancestors
        pos[0] -= parent.scrollLeft;
        pos[1] -= parent.scrollTop;
       
        if (parent.parentNode)
        {
            parent = parent.parentNode;
        }
        else
        {
            parent = null;
        }
    }
   
    return {x:pos[0], y:pos[1]};
}

   box = document.getBoxObjectFor(el);

调用方法:

  var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;

 代码如下

  var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;

复制代码

   pos = [box.x - borderLeft, box.y - borderTop];

var pos = getElementPos(ElementId);

} else    // safari & opera    

pos.y   //标识距离顶部的距离

{

pos.x  //表示距离左边的距离

   pos = [el.offsetLeft, el.offsetTop];  

元素在页面的位置=该元素相对浏览器视窗的位置 浏览器滚动条的值说可以了,绝...

   parent = el.offsetParent;     

本文由1010cc时时彩标准版发布于1010cc时时彩标准版,转载请注明出处:1010cc时时彩标准版js获取成分在页面包车型大巴相

关键词:

上一篇:1010cc时时彩标准版:是什么原因,网吧网络维护

下一篇:没有了