javascript/jquery高度宽度详情解说分析

为什么80%的码农都做不了架构师?>>>   hot3.png

一、window对象表示浏览器中打开的窗口
二、window对象可以省略

一、document对象是window对象的一部分
二、浏览器的HTML文档成为Document对象

window.location和document.location
window对象的location属性引用的是Location对象
表示该窗口中当前显示文档的URL.
document的对象的location属性也是引用了Location对象
window.location===document.location //true

javascript的高宽
window.innerWidth
window.innerHeight
window.outerWidth
window.outerHeight

window.screen.height
window.screen.width
widow.screen.availHeight
window.screen.availWidth
window.screenTop
window.screenLeft

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.cilentTop

假如无padding无滚动
clientWeigth=style.width

假如有padding无滚动
clientWidth=style.width+style.padding*2

假如有padding有滚动,且滚动是显示的
clientWidth=style.width+style.padding*2-滚动轴宽度

clientTop=border-top的border-width
clientLeft=border-left的boder-width

document.body.offsetWidth
document.body.offsetHeight
document.body.offsetLeft
document.body.offsetTop

假如无padding无border
offsetWidth=clientWeigth=style.width

假如有padding无border
offsetWidth=style.width+style.padding*2+(border-width)2
offsetWidth=clientWidth+border宽度
2

假如有padding有滚动,且滚动是显示的,有border
offsetWidth=style.width+style.padding2+(border-width)2
offsetWidth=clientWidth+style.padding
2+滚动轴宽度+border宽度
2

在IE6/7中
offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)

在IE8/8/10/及Chorme中
offsetLeft=(offsetParent的margin-left)+(offsetParent的border的宽度)+(offsetParent的padding-left)+(当前元素的margin-left)

在FirFox中
offsetLeft=(offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left)

无滚动轴时:
scrollWidth==cilentWidth=style.width+style.padding*2

有滚动轴时:
scrollWidth==是实际内容的宽度+padding2
scrollHeight==是实际内容的高度+padding
2

clientX和clientY 相对于浏览器(可视区左上角0,0)的坐标
screenX和screenY 相对于设备屏幕左上角(0,0)的坐标
offsetX和offsetY 相对于事件源左上角(0,0)的坐标
pageX和pageY 相对于整个网页左上角(0,0)的坐标
X和Y 本来是IE属性,相对于用css动态定位的最内层包容元素

jquery高宽
.width()
.height()
.innerWidth()
.innerHeight()
.outerWidth()
.outerHeight()

.width() window document 传值无效
普通元素 width(value) width(function(){})
.width()与.css("width")区别
width()返回结果无单位
css("width")的结果有单位

.innerWidth() window document 传值无效 不推荐
普通元素.innerWidth(value) .innerWidth(function(){})
.outerWidth和innerWidth 以上同理。

.scrollLeft() .scrollTop() .offset() .position()
scrollLeft(): 相对于水平滚动条左边的距离
如果滚动条非常左、右或者元素不能被滚动,那么这个值为0,0
scrollTop(): 相当上、下或者元素不能被滚动,那么这个值为0,0
offset(): 相对于document的当前坐标值(相对于body左上角的left,top的值)
.position(): 相对于offset parent的当前坐标值(相对于offset parent元素左上角的left、top的值)

转载于:https://my.oschina.net/sycbbb/blog/796523

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/457478.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

红黑树插入时的自平衡

红黑树插入时的自平衡 红黑树实质上是一棵自平衡的二叉查找树,引入带颜色的节点也是为了方便在进行插入或删除操作时,如果破坏了二叉查找树的平衡性能通过一系列变换保持平衡。 红黑树的性质 每个节点要么是红色,要么是黑色根节点必须是黑…

UWP学习记录

微软{X:Bind}、{Binding}资料网站 &#xff1a; https://msdn.microsoft.com/windows/uwp/xaml-platform/x-bind-markup-extension在View的ItemTemplate中绑定ViewModel的方法&#xff1a;1 <ItemsControl Name"XX" ItemsSource"{x:Bind VM.XXModels,ModeOne…

【Java】HashMap源码(1.7)

Life is not a ridiculous number of life, the meaning of life lies in life itself HashMap源码 散列集 数组和链表可以保持元素插入的顺序&#xff0c;对数组来说&#xff0c;他的优点是拥有连续的存储空间&#xff0c;因此可以使用元素下标快速访问&#xff0c;但缺点在…

画刷的使用

1.画刷的定义&#xff1a; HBRUSH hBrush; windows 自定义的画刷&#xff1a; WHITE_BRUSH、LTGRAY_BRUSH、GRAY_BRUSH、DKGRAY_BRUSH、BLACK_BRUSH和NULL_BRUSH &#xff08;也叫HOLLOW_BRUSH&#xff09; 获取方法如下&#xff1a; hBrush (HBRUSH) GetStockObject (GRAY_BR…

runtime官方文档

OC是一种面向对象的动态语言&#xff0c;作为初学者可能大多数人对面向对象这个概念理解的比较深&#xff0c;而对OC是动态语言这一特性了解的比较少。那么什么是动态语言&#xff1f;动态语言就是在运行时来执行静态语言的编译链接的工作。这就要求除了编译器之外还要有一种运…

【Java】synchronized关键字笔记

Java Synchronized 关键字 壹. Java并发编程存在的问题 1. 可见性问题 可见性问题是指一个线程不能立刻拿到另外一个线程对共享变量的修改的结果。 如&#xff1a; package Note.concurrency;public class Demo07 {private static boolean s true;public static void mai…

SQL Server-数据类型(七)

前言 前面几篇文章我们讲解了索引有关知识&#xff0c;这一节我们再继续我们下面内容讲解&#xff0c;简短的内容&#xff0c;深入的理解&#xff0c;Always to review the basics。 数据类型 SQL Server支持两种字符数据类型&#xff0c;一种是常规&#xff0c;另外一种则是Un…

pb retrieve时停止工作_大佬们挂在嘴边的PE、PB是什么?

在紧锣密鼓地准备科创50ETF的发行工作间隙&#xff0c;今天小夏先带你读懂最简单的PE、PB估值指标这两大指标。01、什么是PE&#xff08;市盈率&#xff09;PE&#xff0c;也就是市价盈利比率&#xff0c;简称市盈率。市盈率是指股票价格与每股收益&#xff08;每股收益&#x…

【设计模式 01】简单工厂模式(Simple factory pattern)

简单工厂模式 可以根据参数的不同返回不同类的实例 参考&#xff1a; CSDN|简单工厂模式 简单工厂通过传给工厂类的参数的不同&#xff0c;返回不同的对象&#xff0c;包括三部分组成&#xff1a; 具体的”产品“工厂类&#xff08;实例化并返回”产品“&#xff09;客户端&am…

用Visual Studio 2019连接 WSL来编译调试C/C++项目

因为有作业要在Linux环境下写&#xff0c;用虚拟机直接卡成PPT&#xff0c;VS code又不会调试&#xff0c;就搞一下VS 2019吧。 环境 windows 10 WSL(Ubuntu 18.04.4) Visual Studio Community 2019 Linux 里要有C/C环境&#xff08;gcc等&#xff09;VS要有 适用于 Linux…

系统移植的四大步骤

最近在学习系统移植的相关知识&#xff0c;在学习和调试过程中&#xff0c;发现了很多问题&#xff0c;也解决了很多问题&#xff0c;但总是对于我们的开发结果有一种莫名其妙的感觉&#xff0c;纠其原因&#xff0c;主要对于我们的开发环境没有一个深刻的认识&#xff0c;有时…

display:flex

flex&#xff1a;弹性布局 常用属性介绍&#xff1a; flex-direction: column &#xff08;设置主容器主轴方向&#xff09; flex-flow: row wrap &#xff08;第一个参数为flex-direction&#xff0c;第二个为flex-wrap&#xff09; align-items: flex-start &#xff08;设…

Linux(Ubuntu 19.10)下 Qt5 连接 MySQL(QMYSQL driver not loaded)

Linux&#xff08;Ubuntu 19.10&#xff09;下 Qt5 连接 MySQL 安装好 MySQL 和 Qt Qt 连接 MySQL 的代码 QSqlDatabase dQSqlDatabase::addDatabase("QMYSQL");//加载mysql驱动&#xff0c;这个字符串是固定的 d.setHostName("127.0.0.1"); d.setDatabas…

Wpf 数据绑定简介、实例1

简介&#xff1a;1.WPF绑定使用的源属性必须是依赖项属性&#xff0c;这是因为依赖项属性具有内置的更改通知支持&#xff0c;元素绑定表达式使用了Xaml扩展标记&#xff0c; WPF绑定一个控件是使用Binding.ElementName, 绑定非控件对象时使用Source,RelativeSource,DataContex…

【设计模式 04】代理模式

代理模式 代理模式( Proxy)&#xff1a;为其他对象提供一种代理以控制对这个对象的访问。 参考&#xff1a;refactoringguru | proxy 什么是代理模式 有时候如果想要访问某个对象&#xff0c;但又没办法直接访问或不方便直接访问&#xff0c;可以使用代理模式&#xff0c;代理…

css 大于号 标签_CSS设计基础选择器篇

点击上方 Java项目学习 &#xff0c;选择 星标 公众号重磅资讯、干货&#xff0c;第一时间送达前言&#xff1a;如果将CSS样式应用于特定的网页对象上&#xff0c;需要先找到目标元素。在CSS样式中执行这一任务的部分被称为选择器。1 标签选择器优点&#xff1a;为页面中同类型…

crontab 提示 command not found 解决方案

crontab 提示 command not found 解决方案 今天遇见一个问题&#xff0c;crontab的定时任务会报错&#xff1a;java command not found&#xff0c;但是手动执行脚本一直能成功。 猜想是环境变量的问题。 在crontab里添加个打印环境变量的任务&#xff1a; * * * * * echo $PAT…

【设计模式 05】工厂方法模式

工厂方法模式 define an interface or abstract class for creating an object but let the subclasses decide which class to instantiate. 参考&#xff1a; refactoringguru | factory-methodjavatpoint | factory-method-design-pattern博客园| 工厂方法 简单工厂的问题 …

LinkedList类源码浅析(二)

1、上一节介绍了LinkedList的几个基本的方法&#xff0c;其他方法类似&#xff0c;就不一一介绍&#xff1b; 现在再来看一个删除的方法&#xff1a;remove(Object o) remove方法接受一个Object参数&#xff0c;这里需要对参数做空与非空处理&#xff1b; 但是删除一个Object元…

2016OSC源创会年终盛典-综合技术专场-张小刚

2019独角兽企业重金招聘Python工程师标准>>> 综合技术专场 讲师/SPEAKERS 张小刚 网易云负载均衡项目负责人 《网易蜂巢负载均衡技术实践》从网易蜂巢中的实践出发&#xff0c;分享网易蜂巢负载均衡服务从无到有&#xff0c;从私有云到公有云过程中的技术实践。重点…