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,一经查实,立即删除!

相关文章

农用地包括哪些地类_土地地类一览表

一级类二级类三级类含义编号三大类名称编号名称编号名称1农用地指直接用于农业生产的土地,包括耕地,园地,林地,牧草地及其他的农业用地11耕地指种植农作物、土地,包括熟地、新开发复垦整理地,休闲地、轮歇地…

红黑树插入时的自平衡

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

说一下自己对于 Linux 哲学的理解

查阅了一些资料,官方的哲学思想貌似是: 一切皆文件由众多单一目的的小程序,一个程序只实现一个功能,多个程序组合完成复杂任务文本文件保存配置信息尽量避免与用户交互什么,你问我的理解?哲学思想&#xff…

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…

dw1000信标码_DW1000方案工牌型UWB标签,助力10厘米高精度室内定位!

DW1000方案工牌型UWB标签&#xff0c;助力10厘米高精度室内定位&#xff01;发布日期&#xff1a;2019-04-01 浏览次数&#xff1a;244次微能信息(95power)推出一款工牌型UWB标签VDU1510 &#xff0c;广泛应用于超宽带UWB定位系统&#xff0c;最高可实现10cm高精度人员定位。工…

【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;但缺点在…

Docker 基本用法

1.安装&#xff1a; wget http://mirrors.yun-idc.com/epel/6/i386/epel-release-6-8.noarch.rpm rpm -ivh epel-release-6-8.noarch.rpm yum install docker-io -y2.获取镜像 pull docker pull ubuntu docker pull ubuntu:14.043.运行这个镜像&#xff0c;在其中运行bash应用…

画刷的使用

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…

dataframe 控对象_iOS知识 - 常用小技巧大杂烩

1&#xff0c;打印View所有子视图po [[self view]recursiveDescription]2&#xff0c;layoutSubviews调用的调用时机* 当视图第一次显示的时候会被调用。* 添加子视图也会调用这个方法。* 当本视图的大小发生改变的时候是会调用的。* 当子视图的frame发生改变的时候是会调用的。…

【Java】jdk 1.8 新特性——Lambda表达式

Lambda表达式 jdk 1.8 新加入的特性&#xff0c;简化了简单接口的实现 函数式接口 函数式中只有一个待实现的方法&#xff0c;可以使用FunctionalInterface注解标注函数式接口.这个接口中只能有一个待实现的方法&#xff0c;但可以包含默认方法&#xff0c;静态方法以及Obje…

【Todo】Java8新特性学习

参考这篇文章吧&#xff1a; http://blog.csdn.net/vchen_hao/article/details/53301073 还有一个系列转载于:https://www.cnblogs.com/charlesblc/p/6123380.html

jsp调整字体大小font_html font标签如何设置字体大小?

首先我们先来看看htmlfont标签是如何来设置字体大小的&#xff1a;都只到htmlfont标签是个专门用来设置字体的标签&#xff0c;虽然在html5中用的会很少(因为都用css样式来设置font标签里面的属性)&#xff0c;但是个人觉得font标签还是相当强大的标签的&#xff0c;为什么这么…

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语句分析是否走索引_MySql 的SQL执行计划查看,判断是否走索引

在select窗口中&#xff0c;执行以下语句&#xff1a;set profiling 1; -- 打开profile分析工具show variables like %profil%; -- 查看是否生效show processlist; -- 查看进程use cmc; -- 选择数据库show PROFILE all; -- 全部分析的类型show index from t_log_account; ##查看…

SQL Server-数据类型(七)

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

【随记】SQL Server连接字符串参数说明

废话不多说&#xff0c;请参见 SqlConnection.ConnectionString 。 转载于:https://www.cnblogs.com/xiesong/p/5749037.html

【设计模式 00】设计模式的六大原则

设计模式的六大原则 参考&#xff1a; 设计模式六大原则 1. 单一职责原则 一个类只负责一个明确的功能 优点&#xff1a; 降低类的复杂度&#xff0c;提高代码可读性和可维护性降低变更时对其他功能的影响 2. 里氏替换原则 **原则一&#xff1a;**若 o1 是 C1 的一个实例化…

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

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

EF CodeFirst 如何通过配置自动创建数据库当模型改变时

最近悟出来一个道理&#xff0c;在这儿分享给大家&#xff1a;学历代表你的过去&#xff0c;能力代表你的现在&#xff0c;学习代表你的将来。 十年河东十年河西&#xff0c;莫欺少年穷 学无止境&#xff0c;精益求精 本篇为进阶篇&#xff0c;也是弥补自己之前没搞明白的地方,…