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扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
获取body标签的两种方法
Oct 13 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
node.js实现爬虫教程
Aug 25 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 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 获取mysql数据库信息代码
2009/03/12 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
Smarty变量用法详解
2016/05/11 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
JSON Web Tokens的实现原理
2017/04/02 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python创建自己的加密货币的示例
2021/03/01 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
《宿建德江》教学反思
2014/04/23 职场文书
负责培养人意见
2015/06/05 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技