• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JavaScript与JQUERY获取元素的宽、高和位置

JavaScript与JQUERY获取元素的宽、高和位置

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了javascript jquery,jquery跟javascript,jquery是javascript,javascript删除元素,javascript添加元素等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

javascript中

ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height。几乎所有浏览器都支持该方法。jQuery中没有直接的方法,需要用$(ele).offset().top-$(document).scrollTop()计算得到。

注意:right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

pageYOffset 属性是scrollY属性的别名,设置或返回文档在垂直方向滚动的像素值。window.pageYOffset == window.scrollY;前者浏览器兼容性更好。

所以获取元素在页面文档中的位置:

var X= ele.getBoundingClientRect().left+scrollTop;

var Y =ele.getBoundingClientRect().top+scrollTop;
//在窗口的位置+文档滚动掉的尺寸

</div>

为了跨浏览器兼容,文档卷掉的长度请使用如下方式:

varscrollTop= document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

jQuery中

1.鼠标相对于页面的位置

event.pageX/event.pageY:鼠标相对于页面左/上边缘的距离。

2.元素的位置偏移量

offset():返回包含top和left两个属性的对象,相对于document文档的坐标。

position():返回包含top和left两个属性的对象,相对于最近的已定位的包含元素的位置。若无,则相对于document。只对可见元素有效,注意ele{visibility:hidden}也属于可见元素。

3.元素的宽高

width()/height():获得或设置元素【内容】的宽/高;若元素的display:none,其值为0。

innerWidth()/innerHeight():获得包括内边距(padding)的元素宽度/高度,不包括边框;

outerWidth()/outerHeight():获得包括内边距(padding)和边框(border)的元素宽度/高度;

outerWidth(true)/outerHeight(true):获得整个元素的宽度/高度,包括外边距、边框、内边距和内容;

注意:

1)ele.css("height"):返回带有完整单位的字符串(例如400px),若运算需要parseInt转换。ele.height():返回一个没有单位的number数值(例如400)。

2)height()总是返回内容宽度,不管CSS box-sizing属性值。若CSS box-sizing为border-box,将造成这个函数改变这个容器的outerHeight,而不仅是原来的内容高度。

4.浏览器相关宽高

$(window).height():获取浏览器可视窗口的高度;

$(document).height():获取整个网页文档的高度;当网页高度不足浏览器窗口时,返回的是$(window).height()。

$(document).scrollTop():document元素相对document元素对应的滚动条顶部的垂直偏移量,可获取已滚动的距离或设置将要滚动的距离。

即:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。

注意:不建议使用$("html").height()、$("body").height()这样的方法获取高度,原因有:

$("body").height():body可能会有边框,获取的高度会比$(document).height()小;

$("html").height():在不同的浏览器上获取的高度会有差异,浏览器不兼容。

$(window).height()若返回的不是浏览器窗口的高度,可能是网页没有加上<!DOCTYPE>声明。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript使用链式方法封装jQuery中CSS()方法示例
  • 用JavaScript和jQuery实现瀑布流
  • JavaScript与JQUERY获取元素的宽、高和位置
  • JavaScript和jQuery制作光棒效果
  • 纯javaScript、jQuery实现个性化图片轮播【推荐】

相关文章

  • 2017-05-11vue实现添加标签demo示例代码
  • 2017-05-11ionic+AngularJs实现获取验证码倒计时按钮
  • 2017-05-11纯原生js实现table表格的增删
  • 2017-05-11微信小程序开发入门基础教程
  • 2017-05-11jQuery选择器实例应用
  • 2017-05-11Vue.js仿Metronic高级表格(一)静态设计
  • 2017-05-11axios基本入门用法教程
  • 2017-05-11JS获取浮动(float)元素的style.left值为空的快速解决办法
  • 2017-05-11JavaScript组件开发之输入框加候选框
  • 2017-05-11javascript实现简易计算器

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 将鼠标焦点定位到文本框最后(代码分享)
    • js实现微博发布小功能
    • jQuery获取两个元素之间的同胞元素(适用于无限分类的显示隐藏)
    • JS实现PC手机端和嵌入式滑动拼图验证码三种效果
    • easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
    • Android中Okhttp3实现上传多张图片同时传递参数
    • 详解javascript立即执行函数表达式IIFE
    • 基于bootstrap实现收缩导航条
    • 简单实现AngularJS轮播图效果
    • 15个常用的javaScript正则表达式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有