JS提供的属性和方法:
1)client系列:clientWidth clientHeight clientLeft clientTop;
2) offset系列:offsetWidth offsetHeight offsetLeft offsetTop offsetParent;
3) 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
为什么是约等于?
1)不同浏览器中,拿到的scrollHeight值是不同的;
2)同一个浏览器下,内容是否溢出隐藏,拿到的值也不同;
关于浏览器的常用兼容处理思想:
1)思想1:属性的判断:
1.attr in obj:'getComputedStyle' in window;
2.obj.attr: window.getComputedStyle
3.typeOf obj.attr==='function': typeOf window.getComputdStyle==='function';
2)思想2:浏览器异常捕获来解决浏览器的兼容性问题;try{}catch(e){}
3)思想3:通过浏览器判断处理浏览器兼容问题:
var reg=/MSIE (6|7|8)/g;
1.reg.test(window.navigator.userAgent);//true:IE678
2.window.navigator.userAgent.search(reg) !== -1;//true:IE678
3.window.navigator.userAgent.match(reg)//true:IE678
结构父级和定位父级:
结构父级中最大的元素是Html;
定位父级中最大的元素是body;