Js小知识及一些常见易混淆的知识点

1.offsetleft  =  整数（可以是正，也可以是负数）。如果是浮点数，则始终向下取整

               =90px,因为像素里没有小数，自动抛弃整数，表现为向下取整

2.区别
假设：
body{
   height:2000px
  }
function getInfo()
{
var s = "";
s += " 网页可见区域高："+ document.body.clientHeight;——可见高度是2000px,表示全部可见高度

s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";

s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
}

各种宽度：
1.在css中，网页的盒模型，width：是不包括padding border margin 的
在js 中，offsetwidth：width+padding+border；
clientWidth:width + padding（会随着浏览器大小而变化）

所以在js中慎用offsetwidth,因为布局一旦变化，函数就会起变化，而obj.style.width 是单独指css中的宽度；
实例：在运动框架中，border引起div宽度变化非常麻烦

3.js事件
区分鼠标事件：onmouseover（鼠标移入事件）和 onmouseout （鼠标移出事件）

Js小知识及一些常见易混淆的知识点

相关推荐