初学者web前端学习笔记 (2)

IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。

document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。
BackCompat：标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;
CSS1Compat：标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。
例如：

function getViewport(){ 　　　　if (document.compatMode == "BackCompat"){ 　　　　　　return { 　　　　　　　　width: document.body.clientWidth, 　　　　　　　　height: document.body.clientHeight 　　　　　　} 　　　　} else { 　　　　　　return { 　　　　　　　　width: document.documentElement.clientWidth, 　　　　　　　　height: document.documentElement.clientHeight 　　　　　　} 　　　　} 　　} 10.跨浏览器获取Style function getStyle(element, attr) {     if (typeof window.getComputedStyle != \'undefined\') {//W3C         return window.getComputedStyle(element, null)[attr];     } else if (typeof element.currentStyle != \'undeinfed\') {//IE         return element.currentStyle[attr];     } } 11.js动态插入css相关styleSheets，insertRule，addRule，还有删除样式：deleteRule，removeRule

标准浏览器支持 insertRule， IE低版本则支持 addRule。

12.获取页面的宽高

window.innerWidth，window.innerHeight与document.documentElement.clientWidth，document.documentElement.clientHeight

注：用jquery获取的页面的宽度页面不包括滚动条的宽度的

window.innerWidth与window.innerHeight（IE9及以上，谷歌，火狐识别，宽高包含滚动条的宽度）
document.documentElement.clientWidth与document.documentElement.clientHeight（IE，火狐，谷歌都能识别，宽高不包含滚动条的宽度）
如果页面没有滚动条:
window.innerWidth==document.documentElement.clientWidth，
window.innerHeight==document.documentElement.clientHeight（IE8及一下不识别window.innerHeight与window.innerWidth）

//跨浏览器获取视口大小function getInner() {     if (typeof window.innerWidth != \'undefined\') { //IE8及以下undefined         return {             width : window.innerWidth,             height : window.innerHeight         }     } else {         return {             width : document.documentElement.clientWidth,             height : document.documentElement.clientHeight         }     } } 13.使用localStorage存储数据，存储位置在哪里？

这个是浏览器隔离的，每个浏览器都会把localStorage存储在自己的UserData中，如chrome一般就是

C:\Users\你的计算机名\AppData\Local\Google\Chrome\User Data\Profile\Local Storage
如果要在浏览器查看，打开调试工具，在application选项卡下可以查看。

知海匠库web前端课程，研发自网易系，项目教学，贴合企业用人需求，助你高薪就业。