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 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
angularJS模态框$modal实例代码
2017/05/27 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
vue实现弹幕功能
2019/10/25 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
python实现基于信息增益的决策树归纳
2018/12/18 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
Python进度条的制作代码实例
2019/08/31 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
药学专业个人的自我评价
2013/12/31 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
优秀教师个人总结
2015/02/11 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL