使用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. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-qrcode

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. Java JDK for Windows

    目录 JDK简介下载安装配置JAVA_HOME和Path测试禁止Java自动更新(可选操作) JDK简介 JDK是Java语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK ...

  3. css 径向渐变

    .example { width: 150px; height: 80px; background: -webkit-radial-gradient(red, green, blue); /* Saf ...

  4. POJ 2632：Crashing Robots

    Crashing Robots Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8424   Accepted: 3648 D ...

  5. 11 —— 回顾 JSON 相互转换的知识点

    /** * json 转换的两种方式 * * 一,转为字符串 (序列化的过程) * JSON.stringify() * * 二,json 转化为字符串 (反序列化的过程) * JSON.parse( ...

  6. 微信公众号开发之内网映射外网natapp安装（一）

    一,为什么使用natapp 1,在进行微信公众号开发时,我们需要搭建网站,并且随时都有可能修改网站内容进行调试.如果能够将内网ip映射到外网上,将大大方便我们的调试.每次发布只需eclipse运行应用 ...

  7. [Mathematics][Fundamentals of Complex Analysis][Small Trick] The Trick on drawing the picture of sin(z), for z in Complex Plane

    Exercises 3.2 21. (a). For $\omega = sinz$, what is the image of the semi-infinite strip $S_1 = \{x+ ...

  8. 汉诺塔（思维、DP思想）

    链接:https://ac.nowcoder.com/acm/contest/3007/C来源:牛客网 题目描述 现在你有 N 块矩形木板,第 i 块木板的尺寸是 Xi*Yi,你想用这些木板来玩汉诺塔 ...

  9. h5页面乱码-设置编码

    1.h5页面正常,重定向以后出现乱码,如图所示. 解决办法:重定向的时候 需要设置编码. 2.文件charset已经是utf-8,页面还是乱码,文件保存的格式也要是utf-8的哦

  10. choice接口、同花顺使用

    一 choice接口使用 1.choice软件-->量化-->下载中心,下载python接口文件 EMQuantAPI_Python 2.要先绑定手机号,绑定后账户权限不够,暂时放弃. 二 ...