javascript学习笔记-1
学习javascript其实有段时间了,不过一些常用的js方法总是容易混淆,现在开始尝试写在博客上,希望能够强化自己对javascript的认知和记忆。
1.获取浏览器可视区域的宽高
宽:document.documentElement.clientWidth;
高:document.documentElement.clientHeight;
注意点:documentElement并不是什么新鲜事物,它就是一份html文档中的html标签;clientWidth是指定对象的可视宽度;有些旧浏览器可能不支持documentElement对象,经过对象检测后,这时把documentElement改为body对象即可。
记忆方法:window对象指的是整个浏览器,window对象下面有很多对象,其中包括document对象,而document对象的代表区域是我们常看到的网页显示窗口,也就是html标签所管辖的区域(个人见解,如错误望指正,谢谢!),那么使用clientWidth就可以获取网页显示窗口的大小了。
2.获取横向/纵向滚动条的滚动距离
横向:document.documentElement.scrollLeft;
纵向:document.documentElement.scrollTop;
注意点:滚动距离指的是因为拖动滚动条而被卷去的部分
3.获取指定元素的相对文档的偏移距离(jquery)
顶部偏移量:$('nav').offset().top;
左侧偏移量:$('nav').offset().left;
4.获取指定元素的宽高(不含border,padding之类)
宽:$('nav').width();
高:$('nav').height();
5.获取指定元素的宽高(含border,padding之类)
宽:$('nav').outerWidth();
高:$('nav').outerHeight();
6.获取鼠标指针在页面上的位置(根据需要自行修改)
//获取鼠标相对页面位置 function mousePosi(event){ var x,y; if(event.pageX||event.pageY){ x=pageX; y=pageY; }else{ x=event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft; y=event.clientY+document.documentElement.scrollTop+document.body.scrollTop } alert(x+"-"+y); } //进行事件绑定 $(function(){ window.addEventListener('click',mousePosi); })