继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

DOM盒子模型实战,获取外链样式

欧米雪儿lyy
关注TA
已关注
手记 33
粉丝 64
获赞 315

js盒子模型:通过js提供的属性和方法,获取元素的信息;

client系列:
内容的高度,宽度就是我们设置元素的width,height,
如果没有设置高度,容器中的高度会跟着内容自适应,这样获取的值,就是真实的内容高度;
如果设置高度,内容溢出,clientHeight获取的也只能是设置的height;
clientHeight,clientWidth:内容的高度,宽度+padding;
clientLeft,clientTop左边框,上边框的宽度(borderwidth)
contentEditable:boolean值,内容是否可编辑;el.contentEditable = true

offset系列
offsetWidth/offsetHeight =clientHeight/clientWidth+border上下/border左右
offsetParent:当前元素的父级参照物
offsetTop /offsetTop =当前元素的外面框距离父级参照物内边框的的距离;(margin)

scroll系列
scorllwidth scrollHeight :clientWidth类似(前提是我们的容器中没有溢出的内容);
如果容器中有内容溢出,我们获取的结果:
scrollWidth:真实内容的宽度(包含溢出)+左填充
scrollHeight:真实内容的高度(包含溢出)+上填充
scrollLeft scrollTop

关于操作浏览器盒子模型信息兼容性:
document.documentElement.clientHidth || document.body.clientHidth
document.body.clientHidth:当前浏览器可视窗口的高度;
document.body.scrollHidth:当前页面的真实高度,包含溢出的内容;

获取元素的外链样式:
window.getComputedStyle(ele,null)第二个参数是元素伪类(ie6-8不兼容)
el.currentStyle.attr (ie6-8)

//获取浏览器类型
window.navigator.userAgent

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP