jQuery简单获取DIV和A标签元素位置的方法


Posted in Javascript onFebruary 07, 2017

本文实例讲述了jQuery简单获取DIV和A标签元素位置的方法。分享给大家供大家参考,具体如下:

一、获取DIV的位置

var top = jquery("#div_id").offset().top; //获取div的居上位置
var left = jquery("#div_id").offset().left; //获取div的居左位置
var height = jquery("#div_id").height(); //获取div的高度
var width = jquery("#div_id").width(); //获取div的宽度
jquery("#div_id").css({'top':top,'left':left,'height':height,'width':width}); //设置DIV的css属性

二、获取A标签的位置

<a href="http://localhost/#" rel="external nofollow" onclick="javascript:get_a(this,1)">获取A标签的位置</a>
<script language="javascript">
function get_a(thisObj,param){
 var top = jquery(thisObj).offset().top;
 var left = jquery(thisObj).offset().left;
 var height = jquery(thisObj).height();
 var width = jquery(thisObj).width();
}
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
用JS实现一个页面多个css样式实现
May 29 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 #Javascript
纯js三维数组实现三级联动效果
Feb 07 #Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 #Javascript
bootstrap vue.js实现tab效果
Feb 07 #Javascript
Node连接mysql数据库方法介绍
Feb 07 #Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 #Javascript
Bootstrap table表格简单操作
Feb 07 #Javascript
You might like
如何隐藏你的.php文件
2007/01/04 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
讲座主持词
2014/03/20 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis