1.

obj.clientWidth //获取元素的宽度

obj.clientHeight //元素的高度

obj.offsetLeft //元素相对于父元素的left

obj.offsetTop //元素相对于父元素的top

obj.offsetWidth //元素的宽度

obj.offsetHeight //元素的高度

区别:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = width + padding + border offset比client多了border的宽度

//获取元素的纵坐标(相对于窗口)
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
} //获取元素的横坐标(相对于窗口)
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

JS获取元素的offsetTop,offsetLeft等相关属性的更多相关文章

  1. js获取元素宽高、位置相关知识汇总

    常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...

  2. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  3. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  4. js获取元素提示信息

    js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...

  5. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  6. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

  7. js获取元素的外链样式

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...

  8. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  9. js 获取元素坐标 和鼠标点击坐标

    js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...

随机推荐

  1. mysql手动停止无响应查询方法

    http://www.chenweionline.cn/archives/61.htm

  2. EC2的维护更新

     2014年9月28日 近期几天.我们收到了一些客户关于我们即将进行维护更新的问题.下面是AWS全球Blog网站对这个问题的说明,供客户參照. 我们已经開始通知那些受影响的客户,关于我们即将实施的 ...

  3. C# 之 集合ArrayList

    .NET Framework提供了用于数据存储和检索的专用类,这些类统称集合. 这些类提供对堆栈.队列.列表和哈希表的支持.大多数集合类实现系统的接口.以下我们主要来讲一下ArrayList.     ...

  4. Kubernetes之网络策略(Network Policy)

    系列目录 概述 Kubernetes要求集群中所有pod,无论是节点内还是跨节点,都可以直接通信,或者说所有pod工作在同一跨节点网络,此网络一般是二层虚拟网络,称为pod网络.在安装引导kubern ...

  5. POSIX标准中的 “ 限制 ”

    前言 在POSIX标准中,定义了许多限制.这些限制大约分为五类,不同类型的限制获取的方式不一样. 限制值分类 1. 不变的最小值 这类型的限制值是静态的,固定的. 2. 不变值 同上 3. 运行时可以 ...

  6. parameters arguments 形式参数 实际参数

    parameter和argument的区别 – 笑遍世界 http://smilejay.com/2011/11/parameter_argument/ https://en.wikipedia.or ...

  7. mongodb学习之:mongo安装以及远程访问

    在linux下通过apt-get install mongo的方式一键式安装mongo 安装后mongo的配置文件位于/etc/mongodb.conf. 里面有mongo的各项配置,文件内容如下:重 ...

  8. Shell脚本学习指南笔记

    Shell脚本学习指南 作者:Danbo 2015-8-3 脚本编程语言与编译型语言的差异 许多中型.大型的程序都是用编译型语言写的,例如:C.C+.Java等.这类程序只要从源代码(Source C ...

  9. zsh 的简单介绍

    什么是 zsh,要想解释好这个问题,那么得先说明什么是 shell.不负责任的解释说法就是 shell 就是一个壳.这个壳可不是蜗牛的壳,而是计算机的一个壳,当然也不是计算机的外壳啦,这个壳是相对于计 ...

  10. 写给精明Java开发者的测试技巧

    我们都会为我们的代码编写测试,不是吗?毫无疑问,我知道这个问题的答案可能会从 “当然,但你知道怎样才能避免写测试吗?” 到 “必须的!我爱测试”都有.接下来我会给你几个小建议,它们可以让你编写测试变得 ...