标准浏览器盒模型的大小 :
左border+padding+context+右padding+border
js盒模型
clientWidth:可视区宽度 包含width+padding 没有border
clientHeight :可视区高度 包含height+padding 没有border 这两个获取的都是数字 不带单位 类型也是数字类型 而且和内容的高度宽度无关 撑开也没关系 前提是设置了高度 若没有 内容多会跟着变大
clientTop
clientLeft 分别代表上边框和左 边框 不存在clientBottom和clientRight
offsetWidth 相当于clientWidth+border 和内容也是无关
offsetHeight = clientHeight+border
div垂直水平居中
#box{
background: rebeccapurple;
width: 100px;
height: 100px;
position: fixed;
top:50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
所以这种方法在不知道高度的情况下可以用js的方法 比如
oBox.style.marginHeight = -oBox.clientHeight/2+'px';
#box{
background: rebeccapurple;
width: 100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
盒子距离上一级有定位的元素的左边 上边 距离
如果一层层的父级都没有定位 就找浏览器
offsetLeft offsetTop
offsetParent 参照物 指的其实就是带定位的距离最近的父级元素
封装offset函数
<script>
var oBox = document.getElementById('small');
function offset(box){
var l = box.offsetLeft;
var t = box.offsetTop;
var p = box.offsetParent;
while(p.tagName !== "BODY")
{
l+=p.clientLeft+p.offsetLeft;
t+=p.clientTop+p.offsetTop;
p=p.offsetParent;
}
return{
left:l,
top:t,
}
}
console.log(offset(oBox))
</script>
获取浏览器可视区的宽度和高度
var winH = document.documentElement.clientHeight|| document.body.clientHeight;
var winW = document.documentElement.clientWidth||document.body.clientWidth;
scroll属性(获取元素的滚动区域的宽度和高度)
scrollWidth
scrollHeight 在内容没有超出时 高度就是高度 scrollHeight = Height+padding
内容超出时 就是 scrollHeight =内容的Height
内容超出但是设置了溢出隐藏 scrollHHeight = 内容的Height+下边的padding
overflow:auto会出现滚动轴 高度增加
scrollLeftt
scrollTop 滚动轴竖向和横向的 距离边界
以上讲的只有scrollLeft和scrollTop可以赋值 其他的都不可
获取css样式
window.getComputedStyle(document.body).height
window.getComputedStyle(document.body,null).height 标准浏览器下的属性getComputedStyle
不标准下
document.body.currentStyle
document.body.currentStyle['width']
兼容
function getCss(box,params){
if('getComputedStyle' in window)
{
return window.getComputedStyle(box,null)[params]
}
else
{
return box.currentStyle[params]
}
}
console.log(getCss(box,'width'))
设置css和批量设置
function setCss(box,params,value){
box.style[params]=value;
}
setCss(box,'background','green');
function setAllCss(box,obj)
{
for(var key in obj)
{
box.style[key]= obj[key];
}
}
setAllCss(box,{
'color':'red',
'font-size':'20px'
})