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 相关文章推荐
探寻Javascript执行效率问题
Nov 12 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
精通JavaScript的this关键字
May 28 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
Vue-Cli项目优化操作的实现
Oct 27 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 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
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python实现关键词提取的示例讲解
2018/04/28 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
小学三年级学生评语
2014/04/22 职场文书
会计毕业生自荐书
2014/06/12 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
学校工会工作总结2015
2015/05/19 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
如何用python反转图片,视频
2021/04/24 Python