当前位置: 首页 > news >正文

jquery获取元素各种宽高及页面宽高总结

window.οnlοad=function(){
    var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin
        b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding
        c = $("#div").outerWidth(),//outerWidth()返回元素的宽高 + padding + border
        d = $("#div").outerWidth(true);//outerWidth(true)返回元素宽高 + padding + border + margin
    console.log(a,b,c,d);
}
获取浏览器显示区域(可视区域)的高度 :   
$(window).height();   
获取浏览器显示区域(可视区域)的宽度 :
$(window).width();   
获取页面的文档高度   
$(document).height();   
获取页面的文档宽度 :
$(document).width(); 
浏览器当前窗口文档body的高度:  
$(document.body).height();
浏览器当前窗口文档body的宽度: 
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  
$(document).scrollTop();   
获取滚动条到左边的垂直宽度 :
$(document).scrollLeft(); 
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height();
某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)

转载于:https://www.cnblogs.com/goloving/p/7113567.html

相关文章:

  • c# AOP 文章地址
  • Android中悬浮窗口的实现
  • 面向对象-类-成员变量-局部变量-this
  • 全字匹配替换函数
  • Codeforces Round #342 (Div. 2)
  • LeetCode-Maximum Subarray[dp]
  • vue2.0引入腾讯地图
  • SQLServer中的N是什么意思?
  • 一起来看看IOS内存泄漏的一个问题
  • 是真佛只道家常,读《麦肯锡工具》——leo鉴书(15)
  • Android中用Google Map API出现的getLastKnowLocation空指针异常
  • Java中lock锁的问题
  • vuex
  • fopen /open,read/write和fread/fwrite区别
  • 剑指offer(1):数组
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 【5+】跨webview多页面 触发事件(二)
  • ECMAScript入门(七)--Module语法
  • Java 23种设计模式 之单例模式 7种实现方式
  • Java多线程(4):使用线程池执行定时任务
  • npx命令介绍
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • React 快速上手 - 06 容器组件、展示组件、操作组件
  • Vue2.x学习三:事件处理生命周期钩子
  • 阿里研究院入选中国企业智库系统影响力榜
  • 翻译--Thinking in React
  • 跳前端坑前,先看看这个!!
  • 无服务器化是企业 IT 架构的未来吗?
  • Play Store发现SimBad恶意软件,1.5亿Android用户成受害者 ...
  • 阿里云重庆大学大数据训练营落地分享
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • ​linux启动进程的方式
  • ###STL(标准模板库)
  • #QT(智能家居界面-界面切换)
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (二)WCF的Binding模型
  • (附源码)springboot 校园学生兼职系统 毕业设计 742122
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • *1 计算机基础和操作系统基础及几大协议
  • . ./ bash dash source 这五种执行shell脚本方式 区别
  • .bat批处理(六):替换字符串中匹配的子串
  • .dwp和.webpart的区别
  • .gitignore文件设置了忽略但不生效
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .NET Core 将实体类转换为 SQL(ORM 映射)
  • .NET Framework 3.5中序列化成JSON数据及JSON数据的反序列化,以及jQuery的调用JSON
  • .Net Winform开发笔记(一)
  • .NET 设计模式—适配器模式(Adapter Pattern)
  • .NET 中使用 TaskCompletionSource 作为线程同步互斥或异步操作的事件
  • .NET/C# 使窗口永不获得焦点
  • .NET/C# 中你可以在代码中写多个 Main 函数,然后按需要随时切换
  • .NET的微型Web框架 Nancy
  • .net中我喜欢的两种验证码
  • .pyc文件还原.py文件_Python什么情况下会生成pyc文件?
  • @TableLogic注解说明,以及对增删改查的影响