首页 / JQUERY / JavaScript/JQuery 宽高的理解和应用

window.innerWidth：可视页面宽度。
window.innerHeight：除去浏览器顶部菜单栏后的高度（可视网页的高度）。
window.outerWidth：整个浏览器的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。
window.outerHeight：整个浏览器的高度（包括浏览器顶部菜单栏）。

window对象的 screen属性

window.screen：包含有关用户屏幕的信息。

screen属性兼容所有浏览器，注意全部小写。

以下四种永远不变。

window.screen.height：整个屏幕的高度。
window.screen.width：整个屏幕的宽度。
window.screen.availHeight：可利用的高度（不包括系统带的任务栏）。
window.screen.availWidth：可利用的宽度。

screenTop：浏览器到屏幕顶部的距离。
screenLeft：浏览器到屏幕左侧的距离。

与 document 相关的宽高：

document对象中与 client 相关的宽高

document.body.clientWidth：元素可视部分的宽度（padding+content）。
document.body.clientHeight：元素可视部分的高度（padding+content）。

如果没有滚动条，即为元素设定的高度和宽度。

如果出现滚动条，滚动条会遮盖元素的宽度和高度，则该属性为其本来的宽高减去滚动条的宽高。

document.body.clientTop：元素周围边框的厚度。
document.body.clientLeft：元素周围边框的厚度。

如果不指定一个边框或者不定位该元素，其值为0。

document对象中与 offset 相关的宽高

document.body.offsetWidth：元素水平 border+padding+content
document.body.offsetHeight：元素垂直 border+padding+content

和其内部内容是否超出元素大小无关，和本来设定的border以及width和height有关。

document.body.offsetTop：
document.body.offsetLeft

offsetParent

如果当前元素的父元素没有使用 position 属性，则 offsetParent 为 body。

如果当前元素的父元素有使用 position 属性，则 offsetParent 为最近的父元素。

浏览器兼容问题：
3.1 在 IE6/7 中
offsetLeft = (offsetParent的padding-left)+(当前元素的margin-left)。
3.2 在IE8/9/10及Chrome 中
offsetLeft = (offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)。
3.3 在FireFox 中
offsetLeft = (offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)。

document对象中与 scroll 相关的宽高

document.body.scrollWidth：
document.body.scrollHeight：

谷歌浏览器中的表现：

给定宽高小于浏览器宽高时，其值为浏览器宽高。

给定宽高大于浏览器宽高且内容小于浏览器宽高，其值为给定宽高+padding+border+margin。

给定宽高大于浏览器宽高且内容小于浏览器宽高，其值为内容宽高+padding+border+margin。

在某div中scrollWidth和scrollHeight：
无滚动轴情况：scrollWidth=clientWidth=style.width+style.padding2。
有滚动轴情况：
scrollWidth=实际内容宽度+padding2。

document.body.scrollTop
document.body.scrollLeft

可读写，当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。

obj.style.width和obj.style.height
obj.style.width
obj.style.height

可读写，等于css中width和height属性。
对于一个dom元素，其style属性返回一个对象。

documentElement和body的关系

document>documentElement(html)>body
获取可视区域的宽高：
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

Event对象的各种坐标

clientX，clientY

相对于浏览器可视区左上角(0,0)的坐标。

screenX，screenY

相对于设备屏幕左上角(0,0)的坐标。

offsetX，offsetY

相对于事件源左上角(0,0)的坐标。

pageX，pageY

相对于整个网页左上角(0,0)的坐标。

X，Y

本是IE属性，相对于用CSS动态定位的最内层包容元素。

js各种宽高的应用

可视区域加载

获取可视区域的宽高：
var areaHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

元素到浏览器可视窗口左上角(0,0)的距离：
var elementHeight = element.getBoundingClientRect().top||.right||.bottom||.left;

if()

网页滚动到底部或者顶部的加载

判断滚动轴滚动到底部或者顶部：

获取可视区域的宽高：
var areaHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

获取已滚动的宽高：
var scrollTop = document.body.scrollTop;

获取网页总高度：
var wholeHeight = document.body.scrollHeight;

if(areaHeight+scrollTop>=wholeHeight)→到达浏览器底部。
if(scrollTop==0)→到达浏览器顶部。

div滚动到底部的加载

var wholeHeight = element.scrollHeight;
var scrollTop = element.scrollTop;
var divHeight = element.clientHeight;

if(scrollTop+divHeight>=wholeHeight)→div滚动到底部了。
if(scrollTop==0)→div滚动到顶部了。

注意以下element.clientHeight和element.style.height的区别：
element.style.height需要显示的定义元素的style属性才能获取。
element.clientHeight可以直接获取元素的高度。

jq相关宽高介绍

内容宽高：

.width()
.height()

注意：
window和document的只可读不可写。
普通元素可读写。

网页可视区域：
$(window).width()/.height();
网页内容总宽高：
$(document).width()/.height()

.width()和css(“width”)的区别：
.width()返回结果无单位。
css(“width”)返回结果有单位。
高度同理。

内容+padding宽高

.innerWidth()
.innerHeight()

注意：
window和document的只可读不可写。
更注意的是window/document.width() = window/document.innerWidth()，不推荐使用innerWidth()。
普通元素可读写。

内容+padding+border宽高

.outerWidth(Boolean)
.outerHeight(Boolean)

当括号内为true时，包括margin。

注意：
window和document的只可读不可写。
更注意的是window/document.width() = window/document.outerWidth()，不推荐使用outerWidth()。
普通元素可读写。

其他宽高相关

.scrollLeft()

相对于水平滚动轴左边的距离。

如果滚动轴非常左，或者元素不能被滚动，这个值为0。

.scrollTop()

相对于垂直滚动轴上边的距离。

如果滚动轴非常上，或者元素不能被滚动，这个值为0。

.offset()

.offset().top||.left;

元素距离顶部的距离：
element.offset().top；

相对于document的当前值（相对于body左上角的left和top值）。

.position()

.position().top||.left;
相对于offset parent的当前坐标值（相对于offset parent元素左上角的left和top值）。

内容总结

以上是互联网集市为您收集整理的JavaScript/JQuery 宽高的理解和应用全部内容，希望文章能够帮你解决JavaScript/JQuery 宽高的理解和应用所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/715191.html

来源：【匿名】

【上一篇】javascript – 防止Jquery表单上的页面加载提交无显示按钮【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【JavaScript/JQuery 宽高的理解和应用】教程文章相关的互联网学习教程文章

jquery 应用小结

<!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> <title></title> <script src="jquery-1.4.4.js" type="text/javascript"></script> <script type="text/javascript"> $().ready( function() { $("#btn").bind("click",function() { var arr=new Array(...

jQuery 练习：取出数组字典的值, 静态对话框, clone方法应用【代码】

jQuery 中文API文档 http://jquery.cuishifeng.cn/jQuery 取出数组字典的值<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.3.1.min.js"></script> </head> <body> <script>li = [1, 2, 3, 4, 5]$.each(li, function(i, x){console.log(i, x) // i 为索引，x为 value})dic={name:"yuan", sex:"male"}$.each(dic, function(i, x){console.log(i,x) // i 为...

json与str之间的转换在原生，jquery和angular中的应用【代码】

一.原生js1.parse 用于从一个字符串中解析出json 对象。例如var str=‘{"name":"cpf","age":"23"}‘经 JSON.parse(str) 得到：Object: age:"23" name:"cpf" _proto_:Objectps:单引号写在{}外，每个属性都必须双引号，否则会抛出异常2.stringify用于从一个对象解析出字符串，例如var a={a:1,b:2}经 JSON.stringify(a)得到：“{“a”:1,"b":2}”3.eval()可以解释所有格式的字符串，安全系数较低；二，jqueryj...

一个简单的jquery左右列表内容切换应用【代码】【图】

选中左边某个选项点击添加，即可将选中项添加到右边文本框中，点击选中全部即可将全部选项移到右边，移除按钮功能相同。html代码： 1<div id="main"> 2<div id="left"> 3<div id="select1" class="sel"> 4<span>apple</span> 5<span>huawei</span> 6<span>htc</span> 7<span>samsung</span> 8</div> 9<button id="add" value="选中添加">选中添加</button><br>10<button id="add_all" value="选中全部">选中全部</button>11</div>1...

[jQuery EasyUI系列] 创建增删改查应用【代码】【图】

一、数据收集并妥善管理数据是网络应用共同的必要。CRUD允许我们生产页面列表并编辑数据库记录。本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid.将使用到的插件有： datagrid:向用户展示列表数据 dialog:创建并编辑一条单一的数据 form:用于提交表单数据 messager:显示一些操作信息二、操作步骤 1.准备数据库并创建实例数据 2.创建DataGrid来显示用户信息创建没有JavaScript代码的DataGrid 1<table id="dg" title=...

MVC JQuery Table Ajax 的一些扩展和应用【代码】【图】

1///Home page 2public ActionResult MaintainSuperUserAdmin()3 { 4return View();5 }6 7///<summary> 8/// return Json Data for Jquery Table9///</summary> 10///<param name="parm"></param> 11///<returns></returns> 12public JsonResult PageList(DataTablesParam parm)13 {14int iDisplayStart = Convert.ToInt32(Request.Params["iDisplayStart"]);15//data size 16in...

jQuery之Ajax应用【代码】

一、jQuery中$.Ajax()方法的参数1、url #发送请求的地址2、type #HTTP 请求方法(默认以GET发送) 可用值: -GET -POST -PUT #仅部分浏览器支持 -DELETE #仅部分浏览器支持3、dataType #服务器返回的数据类型注意:如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则...

jQuery与Ajax的应用——《锋利的jQuery》（第2版）读书笔记3

第6章 jQuery与Ajax的应用jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。1、load()方法（1）载入HTML文档load()方法是jQuery中最简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。它的结构为：load(url [, data] [, callback]) 参数说明： url：请求HTML页面的URL地址； data（可选）：发送至服务...

jquery中的事件与应用

mouseover和mouseenter的区别mouseenter的定义是当鼠标穿过该元素才会被执行，而mouseover是当鼠标穿过该元素或者其子元素皆会触发该事件 mouseleave一般是与mouseenter一起用的，mouseenter是代表着鼠标穿过该元素则触发事件，mouseleave是离开后的样式， *然后：mouseout和mouseeave的区别其实也是与上面移入事件的区别，mouseout不论是从子元素还是该元素离开都会触发事件，而mouseeave却是只有在离开该元素才会被执行 * cha...

Jquery进度条插件 Progress Bar插件应用方法

Jquery进度条插件 Progress Bar插件应用方法搞的我小纠结了一会，最后感谢同事分享文章，得以结局，呵呵，小经验还是要保存的个人使用总结：<script type="text/ 网页特效" src="/Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js"></script>【Progresbar插件很重要】 <script type="text/javascript"> $(document).ready(function () { 　　...

jQuery的noConflict应用【代码】

JQuery.noConflict()；让出对$变量的使用权；例如：<script type="text/javascript" src="/js/jquery/jquery-1.7.2.min.js"></script><script type="text/javascript" src="/js/bootstrapSelect/js/jquery-1.10.2.min.js"></script><script type="text/javascript">jQuery.noConflict(); </script> 场景：jqgrid最高支持到1.7，bootstrap的多页签功能最低支持1.10，页面上既要用多页签，又要用jqgrid展示列表，这样就会出现jQuery冲...

mint ui datetimepicker 手机端jquery datetimepicker 总结应用【代码】

对于手机端datetimepicker的使用在使用minit ui 的datatimepicker的使用方法首先它需要两个触发器这里因为项目用到的是开始到结束的时间我就点击的时候手动传入了一个参数<input id=‘start‘ type="text" class=‘form-control input-sm‘ readonly="" name=‘start‘ @click=‘openPicker("start")‘ v-model=‘startTime‘> <input id=‘end‘ type="text" class=‘form-control input-sm‘ readonly="" name=‘end‘ @click...

首页 / JQUERY / JavaScript/JQuery 宽高的理解和应用

JavaScript/JQuery 宽高的理解和应用

内容导读

内容图文

以下为个人认为有必要记录的笔记 不喜勿喷

js相关宽高介绍

window对象和document对象的介绍

window对象和document对象的location属性

与 window对象相关的宽高：

window对象的 screen属性

与 document 相关的宽高：

document对象中与 client 相关的宽高

document对象中与 offset 相关的宽高

document对象中与 scroll 相关的宽高

documentElement和body的关系

Event对象的各种坐标

clientX，clientY

screenX，screenY

offsetX，offsetY

pageX，pageY

X，Y

js各种宽高的应用

可视区域加载

网页滚动到底部或者顶部的加载

div滚动到底部的加载

jq相关宽高介绍

内容宽高：

内容+padding宽高

内容+padding+border宽高

其他宽高相关

.scrollLeft()

.scrollTop()

.offset()

.position()

内容总结

内容备注

内容手机端

【JavaScript/JQuery 宽高的理解和应用】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JQUERY - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程

以下为个人认为有必要记录的笔记不喜勿喷