Javascript 获得元素位置&&获得元素样式值-网上找的，方便以后查阅

jackzhangyi

于 2011-10-30 21:38:12 发布

阅读量479

点赞数

分类专栏： javascript 文章标签： javascript function null css html c

本文链接：https://blog.youkuaiyun.com/jackzhangyi/article/details/6919650

版权

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种通过JavaScript获取HTML元素的样式属性和位置的方法。包括如何获取元素的内联样式、当前样式以及如何确定元素在页面上的绝对位置。适用于前端开发者学习与参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 获得元素样式
function attrStyle(elem,attr){
    if("undefined" != typeof elem && "undefined" != typeof elem.style){
        //若样式存在于html中,优先获取
        return elem.style[attr];
    }else if(elem.currentStyle){
        //IE下获取CSS属性最终样式(同于CSS优先级)
        return elem.currentStyle[attr];
    }else if(document.defaultView && document.defaultView.getComputedStyle){
        //W3C标准方法获取CSS属性最终样式(同于CSS优先级)
        //注意,此法属性原格式(text-align)获取的,故要转换一下
        attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();
        //获取样式对象并获取属性值
        return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
    }else{
        return null;
    }
}
attrStyle(document.getElementById("coorDiv"), "margin-left");

// 获得元素位置

function elementLeft(e){
	var offset = e.offsetLeft;
	if(e.offsetParent != null) offset += elementLeft(e.offsetParent);
	return offset;
}

function elementTop(e){
	var offset=e.offsetTop;
	if(e.offsetParent != null) offset += elementTop(e.offsetParent);
	return offset;
}

function elementPos(e){
	return {left:elementLeft(e), top:elementTop(e)};
}