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引用对象的方法
Jan 11 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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
Laravel框架表单验证详解
2014/09/04 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
nodejs实现聊天机器人功能
2019/09/19 NodeJs
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python  连接字符串(join %)
2008/09/06 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
详解Python中的文件操作
2016/08/28 Python
Python中装饰器学习总结
2018/02/10 Python
Django开发的简易留言板案例详解
2018/12/04 Python
python3 线性回归验证方法
2019/07/09 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python的列表List求均值和中位数实例
2020/03/03 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
英语教师自荐信
2014/05/26 职场文书
公司活动总结范文
2014/07/01 职场文书
先进工作者事迹材料
2014/12/23 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL