html常用单位与js获取方法
以下为各种单位的说明
px:绝对单位,页面按精确像素展示
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。
(另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。(100vh为全屏)
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持
css中用calc()可以加入计算方程式
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则
width: calc(100% - 20px);
在介绍js获取长宽的方法前,先简单介绍点基础内容
window对象指包含浏览器一起的
Docunment对象是Window对象的一部分(浏览器内容部分)
window.location
window对象的location属性引用的是Location对象,表示该窗口中当前显示文档的URL
document.location
document的对象的location属性也是引用了Location对象
window.location===document.location //true
window.innerHeight,window.innerWidth(整个浏览器宽高)
window.outerHeight,window.outerWidth(除去浏览器头部栏目等宽高,但包含控制台)
window.screen 对象包含有关用户屏幕的信息
window.screen.heigth 屏幕高度
window.screen.width
window.screen.availHeight 屏幕可以利用的高度
window.screen.availWidth
window.screenTop 浏览器离屏幕的距离
window.screenLeft
innerHeight 浏览器可用的高度(兼容IE9以上,不包含控制台)
innerWidth
outerHeight 整个浏览器的高度(包含浏览器栏目,控制台等)
outerWidht
与client相关的宽高
document.body.clientWidth 该属性指的是元素的可视部分宽度和高度,即padding+content(如果没有滚动条,即为元素设定高宽)
document.body.clientHeight (如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高)
document.body.clientLeft 用来读取元素的border的宽度和高度
document.body.clientTop
与offset相关的宽高
document.body.offsetWidth 指的是元素的border+padding+content的宽度和高度
document.body.offsetHeight (该属性和其内部的内容是否超出元素的大小无关,只和本来设定的border以及width和height有关)
document.body.offsetParent 1,如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body
2,如果当前元素的父级元素中有css定位(position为absolute或relative),offsetParent取最近的那个父级元素
document.body.offsetLeft
document.body.offsetTop
关于scroll
document.body的 scrollWidht和scrollHight
一给定宽高小于浏览器窗口
scrollWidht,scrollHight通常是浏览器窗口的宽高
二给定宽高大于浏览器窗口,且内容小于给定宽高
scrollWidht,scrollHight给定宽高+padding+margin+border
三给定宽高大于浏览器窗口,且内容大于给定宽高
scrollWidht,scrollHight内容宽高+padding+margin+border
screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
clintX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。
共同学习,写下你的评论
评论加载中...
作者其他优质文章