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引用指针使用介绍
Nov 07 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
Vue中引入svg图标的两种方式
Jan 14 Vue.js
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作的文本留言本的例子(五)
2006/10/09 PHP
php 注释规范
2012/03/29 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python处理excel绘制雷达图
2019/10/18 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
自主实习接收函
2014/01/13 职场文书
培训自我鉴定
2014/01/31 职场文书
音乐专业自荐信
2014/02/07 职场文书
模范家庭事迹材料
2014/02/10 职场文书
搞笑车尾标语
2014/06/23 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL