jquery获得页面元素的坐标值实现思路及代码


Posted in Javascript onApril 15, 2013

jquery如何获得页面元素的坐标值 yulutxt是输入经典语录的输入框,feedBackMessage函数见http://www.wesoho.com/article/asp/2765.htm

var p = $("#yulutxt"); 
var yuluoffset = p.offset(); 
feedBackMessage(msg,yuluoffset.left+p.width()+10,yuluoffset.top,5000);

-------------------
1,获取对象(自定义调整打开新窗口参照元素)
var obj = $("#oButton");
实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调整,实例中将创建的新窗口显示的按钮的右下角。

2,获取对象元素的位置(offset()方法)
var offset = obj.offset();
获取对象元素的位置,分别是元素的top和left,调用方法是:offset.left和offset.top,可知当前对象的左部和顶部位置。

3,获取对象元素的宽度(width()方法)
var right = offset.left+obj.width();
实例中是获取对象的右下角位置,创建新窗口的左部位置。

4,获取对象元素的高度(height()方法)
var down = offset.top+obj.height();
实例中是获取对象的右下角位置,创建新窗口的顶部位置

Javascript 相关文章推荐
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 #Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 #Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 #Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 #Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 #Javascript
js作用域及作用域链概念理解及使用
Apr 15 #Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 #Javascript
You might like
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
对于Python中RawString的理解介绍
2016/07/07 Python
python 类详解及简单实例
2017/03/24 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
购买原创艺术品:Zatista
2019/11/09 全球购物
类如何去实现接口
2013/12/19 面试题
校园广播稿100字
2014/10/06 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
南京大屠杀观后感
2015/06/02 职场文书
《山中访友》教学反思
2016/02/24 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
Redis分布式锁Redlock的实现
2021/08/07 Redis