02JS如何设置/获取盒模型对应的宽和高?
【解析】问题简答1)dom.style.width/height【只能取到内联元素】2)dom.currentStyle.width/height【只有IE支持】3)document.getComputedStyle(dom,null).width/height4)dom.getBoundingClientRect().width/height5)dom.offsetWidth/offsetHeight【常用】知识解析1、dom.style.width/height通过dom节点的style样式获取,只能取到行内样式的宽和高,style标签中和link外链的样式取不到.box{...}----------------------------lettargetDom=document.querySelector('.box');letwidth=targetDom.style.width;letheight=targetDom.style.height;console.log("width",width)console.log("height",height)使用类设置宽高时获取的宽高为空<style>box{width:100px;height:100px;border:10pxsolid#CC9966;padding:30px;margin:40px;background:#66FFFF;box-sizing:border-box;}</style></head><body><divclass="box"></div></body>>lettargetDom=document.querySelector('.box');letwidth=targetDom.style.width;letheight=targetDom.sty1e.height;console.1og("width",width)console.1og("height",height)widthheight在行内设置宽高时获取的是行内设置的宽高<body><divclass="box"style="width:100px;height:100px;"></div></body>>lettargetDom=document.querySelector('.box');letwidth=targetDom.sty1e.width;letheight=targetDom.style.height;console.1og("width",width)console.1og("height",height)width100pxheight108pxelement.style.xxx这种只能取得内嵌样式的属性,获取样式能读能写2、dom.currentStyle.width/height取到的是最终渲染后的宽和高,如果有设置宽高,则不论哪种盒模型获取到的都是设置的宽高,只有IE兼容.box{...同上}----------------------------lettargetDom=document.querySelector('.box');letwidth=targetDom.currentStyle.width;letheight=targetDom.currentStyle.height;element.currentStyle[xxx]可以取得内部和外部样式,但是只兼容ie浏览器,获取的样式只能读3、document.getComputedStyle(dom,null).width/height取到的是最终渲染后的宽和高,如果有设置宽高,则不论哪种盒模型获取到的都是设置的宽高,和currentStyle相同,但是兼容性更好,IE9以上支持。getComputedStyle()方法,1.第一个参数:取得计算样式的元素;2.第二个参数:一个伪元素字符串(例如“:after”),如果不需要伪元素信息,默认为null;.box{...同上}----------------------------lettargetDom=document.querySelector('.box');letwidth=window.getComputedStyle(targetDom).widthletheight=window.getComputedStyle(targetDom).heightconsole.log("width",width)console.log("height",height)〉lettargetDom=document.querySelector('.box');letwidth=window.getComputedstyle(targetDom).widthletheight=window.getComputedStyle(targetDom).heightconsole.log("width",width)console.1og("height",height)width100pxheight108px4、dom.getBoundingClientRect().width/height得到渲染后的宽和高,大多浏览器支持。IE9以上支持。.box{...同上}----------------------------lettargetDom=document.querySelector('.box');letwidth=targetDom.getBoundingClientRect().width;letheight=targetDom.getBoundingClientRect().heightconsole.log('width',width)console.log('height',height)标准模型,宽高设置为100的结果,额外包括了padding和border的值;>lettargetDom=document.querySelector('.box');letwidth=targetDom.getBoundingClientRect().width;letheight=targetDom.getBoundingClientRect().heightconsole.1og('width',width)console.1og('height',height)width180height180IE模型,宽高设置为100的结果;>lettargetDom=document.querySelector('.box');letwidth=targetDom.getBoundingClientRect().width;letheight=targetDom.getBoundingClientRect().heightconsole.1og('width',width)console.1og('height',height)width100height1005、dom.offsetWidth/offsetHeight(常用)包括高度(宽度)、内边距和边框,不包括外边距。最常用,兼容性最好。.box{...同上}----------------------------lettargetDom=document.querySelector('.box');letwidth=targetDom.offsetWidth;letheight=targetDom.offsetHeight;console.log('width',width)console.log('height',height)标准模型,宽高设置为100的结果;>lettargetDom=document.querySelector('.box');letwidth=targetDom.offsetWidth;letheight=targetDom.offsetHeight;console.1og('width',width)console.1og('height',height)width180height180IE模型,宽高设置为100的结果;>lettargetDom=document.querySelector('.box');letwidth=targetDom.offsetWidth;letheight=targetDom.offsetHeight;console.1og('width',width)console.1og('height',height)width100height100
来自:CSS、CSS3-盒模型、弹性盒布局