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 相关文章推荐
javascript中的float运算精度实例分析
Aug 21 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
js回到页面指定位置的三种方式
Dec 17 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
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python实现京东秒杀功能代码
2019/05/16 Python
如何获取Python简单for循环索引
2019/11/21 Python
基于Pytorch SSD模型分析
2020/02/18 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
汽车专业学生自我评价
2014/01/19 职场文书
好人好事事迹材料
2014/02/12 职场文书
党员干部承诺书范文
2014/03/25 职场文书
男女朋友协议书
2014/04/23 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Go 语言中 20 个占位符的整理
2021/10/16 Golang
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫