window.navigator.userAgent 获取浏览器的信息
-
JS提供的属性和方法：
1）client系列：clientWidth clientHeight clientLeft clientTop;- offset系列：offsetWidth offsetHeight offsetLeft offsetTop offsetParent;
- scroll系列：scrollWidth scrollHeight scrollLeft scrollTop;
关于父级：
1）parentNode 结构父级
2）offsetParent 定位父级JS提供的属性和方法：
1）client系列：
clientWidth/clientHeight:元素设定的宽/高+左右/上下padding;
clientLeft/clientTop:左边框/上边框的宽度；
跟内容是否溢出：无关；
2)offset系列：
offsetWidth/offsetHeight:clientWidth/clientHeight+左右border/上下的border；
offsetLeft/offsetTop：当前元素的外边框距离定位父级的内边框的距离；
跟内容是否溢出：无关
3）scrollHeight/scrollWidth:
跟内容是否溢出：有关：
内容溢出： 约等于上padding+真实内容的高度；/左padding+真实内容的宽度；
内容没有溢出：等于clientWidth/clientHeight
为什么是约等于？
①不同浏览器中，拿到的scrollHeight值是不同的；
②同一个浏览器下，内容是否溢出隐藏，拿到的值也不同；关于JS盒子模型的一些问题：
1）通过JS的属性和方法拿到的都是元素的复合样式，拿不到单独的值；--getCss;
2）通过JS的属性和方法拿到的都是元素的复合样式值都是整数，不会出现小数；
3）offsetLeft只能求出当前定位元素的外边框距离定位父级的内边框之间的距离，但无法求出定位元素距离body的距离；--offset {left:xx,top:xx}
4)JS盒子模型的兼容性存在问题；--win;关于浏览器的常用兼容处理思想：
思想1：属性的判断：
①attr in obj:'getComputedStyle' in window;
②obj.attr: window.getComputedStyle
③typeOf obj.attr==='function': typeOf window.getComputdStyle==='function';
思想2：浏览器异常捕获来解决浏览器的兼容性问题；try{}catch(e){}
思想3：通过浏览器判断处理浏览器兼容问题：
var reg=/MSIE (6|7|8)/g;
①reg.test(window.navigator.userAgent);//true:IE678
②window.navigator.userAgent.search(reg) !== -1;//true:IE678
③window.navigator.userAgent.match(reg)//true:IE678结构父级和定位父级：
结构父级中最大的元素是Html;
定位父级中最大的元素是body;
BOM
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
