文档章节

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

雪丘行
 雪丘行
发布于 2016/11/30 09:38
字数 619
阅读 465
收藏 34

一、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的值)

© 著作权归作者所有

共有 人打赏支持
雪丘行
粉丝 16
博文 16
码字总数 3370
作品 0
广州
前端工程师
私信 提问
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0
JS对象与Dom对象与jQuery对象之间的区别

前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 解......

苦水润喉
2018/08/16
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
1
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
2
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
3
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
3
0
深入理解JVM—JVM内存模型

深入理解JVM—JVM内存模型 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存...

onedotdot
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部