JS获取元素的offsetTop,offsetLeft等相关属性
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等相关属性的更多相关文章
- js获取元素宽高、位置相关知识汇总
常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- js获取元素位置和style的兼容性写法
今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...
- js获取元素提示信息
js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...
- JS获取元素宽高的两种情况
JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用 document.getElementById('xxx'). ...
- js获取元素显示隐藏的当前状态
js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- js 获取元素坐标 和鼠标点击坐标
js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...
随机推荐
- session写入数据库
<?php class session { private static $handle = null; private static $ip = null; private static $l ...
- 最新研发的基于Java的高速开发平台
可自我扩展的智能开发平台 在开发平台设计过程中,联科研发部一開始就希望能研发一套智能开发机制能自己开发自己的平台-即一个能自我修复和自我扩展的开发平台.这个开发平台不但能开发其它应用还能不 ...
- px rem css 转换工具
http://520ued.com/tools/rem mark 一下 貌似还挺好用
- cuda9,cuda8分享百度云下载
一.文件名称: md5-cuda9cuda-repo-ubuntu1704-9-0-local_9.0.176-1_amd64.debcuda-repo-ubuntu1604-9-0-local_9. ...
- vue-router 介绍
vue-router是官方的路由管理工具,用于组建单页面应用很方便快捷.还记得我们在上一篇文章中,使用vue-cli创建的hello-vue的那个项目吗?打开项目,我们先看下目录结构: 看了上面的目录 ...
- 一起学android之怎样卸载指定的 应用程序(25)
效果图例如以下: 代码例如以下: public class MainActivity extends Activity { private Button btn_delete; @Override p ...
- 第 1 章 第 1 题 高级语言的排序问题 C++标准算法实现
问题分析 依题意,所需程序不用过多考虑效率且暗示使用库,自然想到用高级语言实现(个人选择C++).可用顺序容器暂存数据,用标准算法解决排序问题. 代码实现 #include <iostream& ...
- OpenKM安装(CentOS6)
OpenKM全称是Open Knowledge Management,是一个DMS(文档管理系统).本文介绍如何在CentOS下安装它.本文的安装程序和资料全部来自OpenKM官网:http://ww ...
- Nginx+ffmpeg的HLS开源server搭建配置及开发具体解释
本文概述: 至眼下为止.HLS 是移动平台上很重要并十分流行的流媒体传输协议.做移动平台的流媒体开发,不知道它不掌握它 .真是一大遗憾.而HLS的平台搭建有一定的难度,本文针对对该方向有一定了解的朋友 ...
- memcmp和strcmp的返回值
注意,无论是内存比较还是字符串比较,这两个函数的返回值的意义是一样的. 如果相同,返回0 如果前面大于后面,返回大于0 如果前面小于后面,返回小于0 一定要注意,相同的时候是0,不是true.