`

用javaScript确定元素位置的一些函数

阅读更多
/*
根据id判断位置,返回X,Y轴的坐标
*/
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]
    };
}

/*
 函数功能:
 兼容IE和FF返回目标对象包含边框的left、top、width、height值。其中left、top是相对于document.body的坐标。
 需要参数1个:
 [DOM]o=[DOM]要取值的对象。
 */
function getLTWH(id){
    o = jQuery("#"+id);
    if (o == null) {
        return;
    }
    function getCurrentStyle(style){
        var number = parseInt(o.currentStyle[style]);
        return isNaN(number) ? 0 : number;
    }
    function getComputedStyle(style){
        return parseInt(document.defaultView.getComputedStyle(o, null).getPropertyValue(style));
    }
    var oLTWH = {
        "left": o.offsetLeft,
        "top": o.offsetTop,
        "width": o.offsetWidth,
        "height": o.offsetHeight
    };
    while (true) {
        o = o.offsetParent;
        if (o == (document.body && null)) 
            break;
        oLTWH.left += o.offsetLeft;
        oLTWH.top += o.offsetTop;
        if (jQuery.browser.msie && jQuery.browser.version == "6.0") {
            oLTWH.left += getCurrentStyle("borderLeftWidth");
            oLTWH.top += getCurrentStyle("borderTopWidth");
        }
        else {
            oLTWH.left += getComputedStyle("border-left-width");
            oLTWH.top += getComputedStyle("border-top-width");
        }
    }
    return oLTWH;
}

function getltByWindow(){
    var windowWidth, windowHeight;// 窗口的高和宽
    // 取得窗口的高和宽
    if (self.innerHeight) {
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    }
    else 
        if (document.documentElement &&
        document.documentElement.clientHeight) {
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        }
        else 
            if (document.body) {
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }
    var loc = {
        left: windowWidth,
        top: windowHeight
    };
    return loc;
}
 
分享到:
评论
2 楼 paskaa 2008-11-25  
fsz521job 写道

[flash=200,200][/flash]Java代码   x-small][align=right][/align][/color引用


不懂你什么意思?我可以把代码作为附件下载的,对了,最后一行可以换做documenet.getElementById()
1 楼 fsz521job 2008-11-25  
[flash=200,200][/flash]
x-small][align=right][/align][/color[img][/img]
引用
[u][i][/i][b][/b]][img][/img][color=orange]
              

相关推荐

    javascript函数的解释

    以下是一些JavaScript函数和相关知识点的详细解释: 1. `document.write("")`:这个函数用于在HTML文档加载时向文档流中写入内容,通常不推荐在现代Web开发中使用,因为这会覆盖已有的HTML。 2. 注释:在...

    JavaScript函数大全Word版

    ### JavaScript函数大全Word版知识点详解 #### 一、概述 《JavaScript函数大全Word版》是一份详尽的JavaScript基础知识及函数应用指南。该文档通过列举常见的JavaScript语法特性、内置对象和函数,帮助开发者快速...

    JavaScript常用函数列表

    ### JavaScript常用函数列表详解 #### 一、点击与关闭事件 - `click()`: 这个函数用于模拟点击事件,通常在DOM元素上绑定点击事件处理函数时使用。 - `closed()`: 检测浏览器窗口是否已关闭,返回`true`或`false`...

    JavaScript基础和DOM API函数

    1. 位置:JavaScript代码可以放置在HTML的`<head>`或`<body>`标签内,通常`<head>`内的脚本定义全局函数,而`<body>`内的脚本处理页面加载后的交互。此外,通过`<script>`标签的`src`属性,可以引用外部的.js文件,...

    js函数大全 javascript

    以下是一些基本的JavaScript函数和概念的详细解释: 1. **`document.write()`**:这个函数用于在HTML文档的当前位置插入文本或HTML代码。例如,`document.write("Hello, World!");`会在页面上输出“Hello, World!”...

    【JavaScript源代码】JavaScript的function函数详细介绍.docx

    JavaScript中的`function`函数是其核心特性之一,它允许我们定义可重复使用的代码块,能够封装任意数量的语句,并且可以在程序的任何位置被调用。JavaScript的函数与许多其他编程语言(如C)相比,具有独特的特点,...

    100多个很有用的JavaScript函数以及基础写法汇总

    本文将详细介绍从给定文件中提炼出的一些JavaScript基础知识和常见函数。 1. `document.write("")` 是一个输出语句,常用于向HTML文档中动态插入内容。 2. 注释在JavaScript中可以使用 `//` 开始一行注释,或者 `/*...

    JavaScript实际运用中的函数大全

    ### JavaScript 实际运用中的函数大全 #### 一、概述 JavaScript 是一种广泛应用于网页开发的脚本语言,它能够使网页具有动态交互性。本文档将详细介绍一系列实用的 JavaScript 函数,涵盖文档对象模型(DOM)操作...

    javascript函数大全集合

    ### JavaScript函数大全集合详解 #### 一、概述 ...以上是JavaScript中常用的一些函数和技术点的简要介绍。掌握这些基础知识对于前端开发非常重要,可以帮助开发者更加高效地编写高质量的JavaScript代码。

    javascript函数全集.pdf

    - JavaScript的字符串函数包括`concat()`连接字符串,`indexOf()`查找子字符串位置,`replace()`替换子字符串,`slice()`截取字符串,`toLowerCase()`和`toUpperCase()`转换大小写等。 这些函数是JavaScript核心库...

    javascript函数大全

    根据给定的文件信息,以下是对“javascript函数大全”中涉及的关键知识点的详细解析: ### 1. `document.write("")` `document.write()`是用于在HTML文档中写入文本、HTML表达式或JavaScript代码的函数。它常用于...

    js函数一览表 javaScript 自定义函数一览表

    ### JavaScript自定义函数一览表详解 #### 一、概述 JavaScript是一种广泛应用于网页开发中的脚本语言,它能够实现动态效果、用户交互等功能。本文档将详细介绍一系列与JavaScript相关的知识点,包括基本语法、...

    100多个有用的JavaScript函数及基础语法集合

    JavaScript 基础语法和函数集合 JavaScript 是一种广泛应用于 Web 开发的编程语言,下面是 JavaScript 基础语法和函数集合的总结: 输出语句 document.write("") 用于输出语句到 HTML 文档中。 注释 在 ...

    教案javascript常用函数集.pdf

    JavaScript的Math对象提供了一些数学常量和函数,如`Math.random()`(生成0到1之间的随机数)、`Math.round()`(四舍五入)等。 5. 字符串函数: JavaScript字符串对象提供了大量方法,如`concat()`(连接字符串...

    JavaScript调用window函数.docx

    window 对象的 frames 属性是一个数组,用于存储文档中每一个由元素创建的子窗口(框架)实例,其中的下标既可以是次序号也可以是使用 FRAME 元素的 NAME 属性指定的名称来得到并使用。 12. frames.length 属性 ...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    57、原生JavaScript确认是否键盘有效输入值 58、原生JavaScript获取网页被卷去的位置 59、原生JavaScript另一种正则日期格式化函数+调用方法 60、原生JavaScript时间个性化输出功能 61、原生JavaScript解决offsetX...

    javascript常用函数.docx

    以下是一些JavaScript的常用函数和基础知识的详细说明: 1. `document.write("")`: 这个函数用于向HTML文档流中写入内容。通常在页面加载期间使用,向浏览器输出动态生成的HTML。 2. 注释:在JavaScript中,单行...

    100多个很有用的javascript函数以及基础写法集合

    JavaScript 函数和基础写法大集合 JavaScript 是一种广泛应用于 Web 开发的编程语言,下面...这些是 JavaScript 中的一些常用的函数和基础写法,掌握这些知识点可以帮助开发者更好地使用 JavaScript 进行 Web 开发。

Global site tag (gtag.js) - Google Analytics