js,jquery获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)
网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)
(javascript) document.documentElement.scrollTop //firefox
(javascript) document.documentElement.scrollLeft //firefox
(javascript) document.body.scrollTop //IE
(javascript) document.body.scrollLeft //IE
(jqurey) $(window).scrollTop()
(jqurey) $(window).scrollLeft()
网页工作区域的高度和宽度
(javascript) document.documentElement.clientHeight// IE firefox
(jqurey) $(window).height()
元素距离文档顶端和左边的偏移值
(javascript) DOM元素对象.offsetTop //IE firefox
(javascript) DOM元素对象.offsetLeft //IE firefox
(jqurey) jq对象.offset().top
(jqurey) jq对象.offset().left
获取页面元素距离浏览器工作区顶端的距离
页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度
即:
页面元素距离浏览器工作区顶端的距离 = DOM元素对象.offsetTop - document.documentElement.scrollTop
举个应用例子:(个人习惯用jqurey,免去兼容性烦恼)
利用 页面元素距离浏览器工作区顶端/左端的距离 来实现一个提示框在页面不同位置时候保证提示信息显示的正确位置,如图所示 附代码
可见不管输入框在哪里,提示框信息永远都显示在正确的位置,而不会在弹出提示框时候被挡住
code(上面例子的html页面,需引用jquery-1.8.2.min.js)
<!--<!DOCTYPE html>--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="jquery-1.8.2.min.js"></script><script>$(document).ready(function () {});function UseKeyTo(c) {var inputControl = $(c);if (!document.getElementById('province')) {$('body').append('<div id="province" style="position:absolute;border:1px solid #808080;width:540px;height:197px;border-radius: 3px;background-color:#ccc;display:block;"><div class="c" v="京">(京)北京市00</div><div class="c" v="津">(津)天津市01</div><div class="c" v="沪">(沪)上海市02</div><div class="c" v="渝">(渝)重庆市03</div><div class="c" v="琼">(琼)海南省04</div><div class="c" v="黑">(黑)黑龙江05</div><div class="c" v="蒙">(蒙)内蒙古06</div><div class="c" v="冀">(冀)河北省07</div><div class="c" v="晋">(晋)山西省08</div><div class="c" v="鲁">(鲁)山东省09</div><div class="c" v="吉">(吉)吉林省10</div><div class="c" v="苏">(苏)江苏省11</div><div class="c" v="皖">(皖)安徽省12</div><div class="c" v="浙">(浙)浙江省13</div><div class="c" v="闽">(闽)福建省14</div><div class="c" v="赣">(赣)江西省15</div><div class="c" v="辽">(辽)辽宁省16</div><div class="c" v="豫">(豫)河南省17</div><div class="c" v="鄂">(鄂)湖北省18</div><div class="c" v="湘">(湘)湖南省19</div><div class="c" v="粤">(粤)广东省20</div><div class="c" v="桂">(桂)广西省21</div><div class="c" v="新">(新)新疆区22</div><div class="c" v="陕">(陕)陕西省23</div><div class="c" v="甘">(甘)甘肃省24</div><div class="c" v="宁">(宁)宁夏区25</div><div class="c" v="青">(青)青海省26</div><div class="c" v="川">(川)四川省27</div><div class="c" v="藏">(藏)西藏区28</div><div class="c" v="云">(云)云南省29</div><div class="c" v="贵">(贵)贵州省30</div><div style="float:left;"> 选择的简称:<span id="simple" style="color:red;font-weight:bolder;"></span></div><div style="position:absolute;right:5px;bottom:5px;display:inline;"><input id="Kconfirm" type="button" name="name" value="确定" /><input id="Kcancel" type="button" name="name" value="取消" /></div></div>');var province = $('#province');$('#province .c').css({'font-size':'14px','border-radius': '5px','height': '20px','width': '100px','border': '1px solid rgb(30,113,177)','background-color': 'rgb(219,234,249)','text-align': 'center','line-height': '18px','margin-left': '5px','margin-top': '5px','float': 'left','display': 'inline','cursor': 'pointer'});$('#province .c').hover(function () { $(this).css("background-color", "rgb(30,113,177)") },function () { $(this).css("background-color", "rgb(219,234,249)") });$("#province .c").click(function () {$('#simple').html($(this).attr('v'));inputControl.val($(this).attr('v'));});$("#province #Kconfirm").click(function () {province.css("display", "none");});$("#province #Kcancel").click(function () {inputControl.val('');province.css("display", "none");});}var province = $('#province');province.show();var _top = inputControl.offset().top - $(window).scrollTop();//inputControl[0].offsetTop - $(window).scrollTop();var _left = inputControl.offset().left - $(window).scrollLeft(); //inputControl[0].offsetLeft - $(window).scrollLeft(); province.css("left", inputControl.offset().left + 'px').css("top", inputControl.offset().top + 30 + 'px');var viewWidth = document.documentElement.clientWidth// var viewHeight = document.documentElement.clientHeight;// if ((_left + province.width()) > viewWidth) {//计算div的offset().leftvar left = (inputControl.offset().left - (_left + province.width() - viewWidth+10)) + 'px';province.css("left", left);}if ((_top + province.height() + 30) > viewHeight) {//计算div的offset().topvar top = (inputControl.offset().top - province.height() - 10) + 'px';province.css("top", top);}}</script> </head> <body><pre><input id="kk" type="text" name="name" value="" placeholder="请选择省份简称" style="margin-left: 1300px;border:solid red 2px;height:16px;" onfocus="UseKeyTo(this);" /></pre> </body> </html>
转载于:https://www.cnblogs.com/shimily/articles/9716860.html
js,jquery获取页面元素距离浏览器工作区顶端的距离相关推荐
- html 获取下一个兄弟节点,JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法...
$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; for(v ...
- html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级 上一个 下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
- jQuery 获取页面元素的属性值
获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- js怎么获取一个元素与屏幕右边的距离_js中如何获取某个元素到浏览器最左和最右的距离...
js中如何获取某个元素到浏览器最左和最右的距离以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! js中获取某个元素到浏览器 ...
- jquery兄弟标签_js jquery获取当前元素的兄弟级 上一个 下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
- js隐藏html页面元素高度,如何使用jQuery获取隐藏元素的高度?
HTML元素可以在jquery hide()函数的帮助下隐藏,或者也可以通过在css中使设置visibility:hidden来轻松隐藏.那么如何使用jquery找到这个隐藏元素的高度?下面本篇文章就 ...
- jsquery获取页面元素的html代码,【jQuery 使用】 利用jQuery.prop(outerHTML)获取包含自身在内的HTML元素的HTML代码...
jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置. ...
- 浏览器开发者模式获取页面元素
web开发中经常会借鉴体验较好或者合适的网站,可以直接拿过来用.这时通过浏览器开发者模式获取页面元素非常方便,一是能快速获取页面元素.二是能查看页面元素相对路径便于分类,下面以Google为例介绍 1 ...
- js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test&q ...
最新文章
- 有个程序员老公有多爽???
- 查找字符串末尾含关键字_Excel教程:用find函数带关键字提取杂乱文本
- concurrenthashmap_ConcurrentHashMap实现原理及源码分析
- idea创建mybatis的config.xml和mapper.xml方法
- TransactionScope 的基本原理简介
- 技术达人“创造营”官宣:Microsoft Learn 学习平台C位出道
- 蓝桥杯扫盲之int, char, unsigned int, unsigned char的使用
- jdbc 连接 Oracle 进行基本的增删改查
- es6 Promise,生成器函数,async
- python函数应用_python 函数应用
- 数据库实战案例—————记一次TempDB暴增的问题排查
- ios 融云 重写对话列表_iOS开发融云即时通讯集成详细步骤
- 常用邮箱SMTP、POP3域名及其端口号
- 镁光 鸡血模式 linux,所以,镁光1100到底是不是全盘slc的模式?之前就几个帖子...
- postgresql查看数据库及数据表占用空间
- python制作折线图_Python 绘制可视化折线图
- MySQL【数据类型】
- Microsoft Offfice 2010 测试版下载
- 40vf什么意思_LED 的基本术语VF、IV、WL、IR 解释及光通量换算...
- 最能吸引精神变态者的十大职业
热门文章
- 网络爬虫:使用多线程爬取网页链接
- Kafka在Spring项目中的实战演练
- Oracle Dababase_buffer_cache数据库高速缓存组织结构剖析
- python面向对象编程的三大特性_Python面向对象总结及类与正则表达式详解
- iOS - 手动添加新的字体
- js怎么定义combobox_好程序员web前端教程分享新手应该怎么学习webpack
- linux检测文件名编码,Linux下查看文件编码,文件或文件名编码格式转换 | 缥缈的云...
- 技术盘点:2022年云原生架构趋势解读
- 如何能在git bash中使用mvn命令_使用Github Actions完成CI/CD工作
- 怎么将excel中的url批量转化为图片_阿里云+Power BI,轻松实现图片可视化报告(一)...