使用js循环的方式批量控制元素的大小时结果往往不尽如人意。

我总结了一条规律

在一个循环体内不可以同时存在一下两种操作，否则容易导致元素错位或大小改变：

1.对元素的offsetWidth、offsetHeight等与大小、位置有关的属性的访问

2.对元素的移动、改变大小（包括可能间接导致元素移动和改变大小的操作，例如创建插入或删除字符/节点、将其移动到另一个父容器中等）

如果有的话，将其拆分成两个循环才行。

至于为什么，在循环体内插入一个alert（“”），然后运行一下你就知道了

js操作元素导致元素错位和大小改变的更多相关文章

  1. 在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,

    前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发 ...

  2. selenium常用操作，查找元素，操作Cookie，获取截图，获取窗口信息，切换，执行js代码

    目录: 1. 常用操作 2. 查找元素 3. 操作Cookie 4. 获取截图 5. 获取窗口信息 6. 切换 7. 执行JS代码 简介 selenium.webdriver.remote.webdr ...

  3. JS操作iframe元素

    1.  demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html ...

  4. js操作：selenium无法操作隐藏元素问题

    对于前端隐藏元素,一直是selenium自动化定位元素的隐形杀手,脚本跑到隐藏元素时位置时报各种各样的错误, 隐藏的下拉菜单又没有办法避免,此帖只为交流隐藏元素自动化定位处理方法(3种操作)      ...

  5. Selenium with Python 005 - 调用js操作页面元素

    WebDriver提供了execute_script()方法来执行JavaScript方法,格式如 driver.execute_script(script,*args) 执行js一般有两种场景,一是 ...

  6. JS/jQuery--iframe框架内外元素的操作（转）

    JS/jQuery--iframe框架内外元素的操作 原创 2017年12月07日 14:23:09 标签: js / iframe 28 两个问题: 如何在父页面操作iframe框架内的元素? 如何 ...

  7. webdriver与JS操作浏览器元素

    1.JQuery的选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 c ...

  8. vue.js操作元素属性

    vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...

  9. selenium中元素操作之浏览器窗口滚动&网页日期控件操作（js操作）（五）

    js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...

随机推荐

  1. jedis哨兵模式的redis组（集群），连接池实现。（客户端分片）

    java 连接redis 我们都使用的 是jedis  ,对于redis这种频繁请求的场景我们一般需要对其池化避免重复创建,即创建一个连接池 ,打开jedis的 jar包我们发现,jedis对池已经有 ...

  2. 【转载】webdriver 自动化测试如何定位到动态变化ID的iframe框内

    大家知道,在自动化测试脚本编写过程中,如果页面上跳出一个iframe框时,我们是定位不到框内内容的,可以通过 driver.findElement(By.id("")); driv ...

  3. 打包|zip

    原始:gzip zip -r ./gzip.zip ./gzip/* adding: gzip/split_10.gz (deflated 2%) adding: gzip/split_11.gz ( ...

  4. VC控件-子类化控件技术

    子类化一个Windows控件与子类化一个C++类不同,子类化一个控件要求你把一个窗口的一些或所有的消息映射都替换成自己的函数来响应,这样你就有效的阻止了控件去做系统默认的行为,而按自己的想法去做.子类 ...

  5. TX2超详细，超实用刷机教程（亲测有效，所有步骤都是博主亲自实践过）

    https://blog.csdn.net/DeepWolf/article/details/88640937 本篇主要对TX2刷机流程以及刷机过程中遇到的坑和相应的解决办法做个记录,以便再次刷机时能 ...

  6. exit(0)与exit(1)

    exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: return():返回函数,若在主函数中,则会退出函数并返回一值. 详细说: 1. return返回函数值,是关键字 ...

  7. 文献阅读报告 - Move, Attend and Predict

    Citation Al-Molegi A , Martínez-Ballesté, Antoni, Jabreel M . Move, Attend and Predict: An Attention ...

  8. spring 官方文档-片段学习——webflux-ann-controller

    spring 官方文档-片段学习总结 片段所在连接:https://docs.spring.io/spring/docs/5.0.4.RELEASE/spring-framework-referenc ...

  9. 学术Essay写作中Introduction的正确打开方式

    其实在学术essay写作过程中,很多留学生经常不知道如何写introduction,所以有些开头的模板句就出现了,比如,With the development of society/With the ...

  10. Linux 目录变化监听 - python代码实现

    在python中 文件监控主要有两个库, 一个是pyinotify ( https://github.com/seb-m/pyinotify/wiki ),pyinotify依赖于Linux平台的in ...