BOM 基本操作
-
查看滚动条的滚动距离
(1) window.pageXOffset/pageYOffset
(2) document.body/documentElement.scrollLeft/scrollTop
(3) 封装兼容性方法,求滚动轮滚动距离getScrollOffset() -
查看视口的尺寸
(1) window.innerWidth/innerHeight
(2) document.documentElement.clientWidth/clientHeight
(3) document.body.clientWidth/clientHeight
(4) 封装兼容性方法,返回浏览器视口尺寸getViewportOffset() -
查看元素的几何尺寸
domEle.getBoundingClientRect()
(1) 兼容性很好
(2) 该方法返回一个对象,对象里面有left,top。right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标
(3) 返回的结果不是实时的 -
查看元素的尺寸
dom.offsetWidth, dom.offsetHeiht -
查看元素的位置
(1) dom.offsetLeft, dom.offsetTop
// 对于无定位父级的元素,返回相对文档的坐标。对于有定位父级的元素,返回相对与最近的有定位的父级的坐标
(2) dom.offsetParent
// 返回最近的有定位的父级,如无,返回body,body.offsetParent返回null
e.g. 求元素相对于文档的坐标getElementPosition -
让滚动条滚动
window上有三个方法: scroll(), scrollTo(); scrollBy()
三个方法功能类似,都是将x、y坐标传入,实现滚动条滚动到(x,y)位置
区别: scrollBy()会在之前的数据基础之上做累加
e.g. 利用scrollBy()快速阅读的功能
脚本化CSS
-
读写元素css属性
dom.style.prop
(1) 可读写行间样式,没有兼容性问题,碰到float这样的保留字属性,前面应加css
(2) e.g. float -> cssFloat
(3) 复合属性必须拆解,组head那次变成小驼峰式写法
(4) 写入的值必须是字符串格式 -
查询计算样式
window.getComputedStyle(ele, null)
(1) 计算样式只读,读的是最终显示的样式
(2) 返回的计算样式的值都是绝对值,没有相对单位
(3) 第二个参数用于取伪元素 -
封装兼容性方法getStyle(elem, prop)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。