offsetwidth111[easy to understand]

Hello everyone, we meet again, I'm your friend Quanstack Jun.

offsetwidth includes border, padding, etc., that is, the size of the box model.(So when offsetWidth and border appear at the same time, consider whether it will cause errors) A small experiment When the width and height of the div is 200px and the border is 1px, add a narrower to the divWhen the timer event is used, use the statement: div.style.width = div.offfsetWidth -1+'px', you will find that the div is getting wider.The reason: style.width is 200 without a doubt, but offsetWidth is (200+1+1)=202, so after the first statement execution, style.width = 202-1+'px'=201px; that's why the div gets wider, the next second and third execute and so on.

Solution: ① A more tedious solution is to set the width in the interline style of the div, and then change it to parseInt (div.style.width) on the right side of the assignment statement, which can also complete the function implementation.②The method of obtaining style through encapsulation, when there is an interline style, the data between the lines is obtained, and when it is in the style sheet, the value of the width in the style sheet is obtained.

function getStyle(obj,name){ //packages a function, to resolve compatibility issues with different browsersif(obj.currentStyle){return obj.currentStyle[name]; //currentStyle is only compatible with IE, not compatible with Firefox and Google}else{return getComputedStyle(obj,false)[name];//getComputedStyle is compatible with Firefox and Google, not IE//JS motion application-1}}

Copy

Publisher: Full-stack programmer, please indicate the source: https://javaforall.cn/129592.htmlOriginal link: https://javaforall.cn