Javascript 强制浏览器渲染Dom文档

在Cordova+Framework7开发Hybrid App时，在iPhone 7上遇到一个诡异的现象(Chrome浏览器、Android都正常)：js修改手风琴中的input文本框的值后，但页面仍然显示旧指，而用js读取却显示新值。

 

当浏览器在执行一段js代码的过程中，一般不会立即更新渲染dom文档，而是在整段代码执行完毕的时候才去更新dom文档。

浏览器这么实现，是为了尽可能提高性能。但这种实现有时候会给我们带来一些意外的负面效果。

 

js访问以下 Dom属性的时候，浏览器都会先渲染Dom文档，再获得相关的属性。从而强制浏览器立即渲染Dom文档。

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight