我们使用元素.style.left在style标签中设置的样式的值都获取不到。 现在就说一下三大系列吧,首先明确document下如何直接获取元素。
document下直接获取元素
- 直接获取title console.log(document.title);//获取的是title标签中的值
- 直接获取body(IE8不支持,使用document.documentElement) console.log(document.body);
- 直接获取html console.log(document.html)
- 由于js是动态类型的语言,对象可以直接通过.的方式添加属性,如果属性没赋值,则是undefined,如果赋值就有结果。
在介绍三大系列前,可先看一下这张图:
offset系列
- offsetLeft:元素在页面中的当前位置距离页面左侧的像素(不准确的)
- offsetTop:元素距离上面的距离(像素)
- offsetWidth:元素在页面中的宽度
- offsetHeight:元素在页面中的高度
- offset:获取的是数字类型的值,没有px
- 元素的offsetLeft获取的时候:
- 包含:父级元素的border的宽度,不会包括自己的边框
- 包含:父级元素的margin-left,也包含自己的margin-left
- 包含:父级元素的padding-left,不包括自己的padding-left
- 注意:父级元素脱离文档流,子级元素也脱离文档流,此时只有自己的left,不包括父级的left
- 注意:父级元素脱离文档流,自己元素没有脱离文档流,此时相对于父级的是0
- 以上这些属性的值都是可读不可写(能够获取-能够读取到,不可写:不能赋值--不能设置)
console.log(dvObj.offsetWidth);//宽度
console.log(dvObj.offsetHeight);
dvObj.offsetHeight="1000";
scroll系列
- scrollHeight:层中内容实际的高度
- scrollWidth:层中内容实际的宽度
- scrollLeft:层中内容卷曲出去的内容,就是层中内容拉动滚动条滚出去的距离(左右方向拉动滚动条)
- scrollTop:层中内容卷曲出去的内容,就是层中内容拉动滚动条滚出去的距离(竖直方向拉动滚动条)
- 滚动条事件:onscroll
- 元素设置了定位,就会脱离标准流,下面的元素就会直接跳上去;固定导航栏设置了定位fixed中下面内容直接跳上去的问题
console.log(dvObj.offsetHeight);
console.log(dvObj.scrollHeight);//层中内容的高度
console.log(dvObj.scrollTop);
client系列
- clientX和clientY是可视区域的坐标,获取不到滚动条拉动的时候向上滚出去的距离;兼容问题:事件参数e(有关事件的疑问可以查看我的下一篇博客: DOM事件详解)在IE8中没有,在谷歌浏览器中有;IE8中有window.event.clientX
- 事件参数兼容写法:e=e||window.event;
- e.clientX和e.clientY是可视区域的坐标
- e.pageX和e.pageY才是真正的文档的坐标
- 兼容的写法是:e.client+document.body.scrollTop==e.pageY
注意点
- 当前移动元素的父级元素的margin值会影响当前移动的元素的位置。
- 涉及到很多的兼容问题,一定要多测试,写出可以解决兼容问题的代码,可查看我的博客XXXX
- 元素margin-left和元素的margin-top会可能影响元素和鼠标之间的距离
- 当前移动元素的父级元素的margin值会影响当前移动的元素的位置
- 清除选中 window.getSelection?window.getSelection().removeAllRange():document.selection.empty();
试一试
- 完整的轮播图(点击页码切换图片,左右焦点切换图片,无缝连接)(代码:http://git.oschina.net/yxmBetter/Carousel-figure)
- 固定导航栏(导航栏设置了定位,就脱标了,下面的元素会直接跳上去,解决方法:下面内容设置marginTop或者paddingTop即可。)
- div层中内容随滚动条移动
- 淘宝鼠标放到小图片上会显示对应位置大图(地址:http://git.oschina.net/yxmBetter/Enlarge-Image)
三大系列具体的情况,在使用的时候具体测试一下就可以,只要了解使用哪些更合适就可以了,加油!