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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
JavaScript插件Tab选项卡效果
Nov 14 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
JavaScript实现简单进度条效果
Mar 25 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
杏林同学录(七)
2006/10/09 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
PHP常用的三种设计模式
2017/02/17 PHP
html读出文本文件内容
2007/01/22 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python中split方法用法分析
2015/04/17 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
查看python下OpenCV版本的方法
2018/08/03 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python