使用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. 新版本vue-cli3.x 无法热更新问题【转载】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_38644883/articl ...

  2. SpringMVC： JSON

    SpringMVC:JSON讲解 什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,目前使用特别广泛. 采用完全独立于编 ...

  3. apache2+django+virtualenv 服务器部署实战

    目录 基本配置 配置python环境 安装 python.pip 安装 virtualenv 配置python虚拟环境 配置 apache2 安装 apache2 安装 mod-wsgi 服务 部署d ...

  4. Beyond Compare 文件对比工具的使用

    Beyond Compare 文件对比工具的使用 Beyond Compare 工具下载地址: http://www.onlinedown.net/soft/633850.htm 本文下载地址:E:\ ...

  5. 修改完Apache的配置文件，重启Apache后，仍无法打开网页

    在修改Apache的配置文件时,由于某些非正常操作,导致httpd.conf文件非正常打开,需要继续enter进入, 这是会在httpd.conf同级目录中产生一个隐藏文件,.httpd.conf.s ...

  6. 组件state

    一.设计合适的state 1.1 定义: state代表一个组件UI呈现的完整状态 stae代表一个组件UI呈现的最小状态集[所有状态都用于组件UI的变化,没有任何多余的状态] 1.2 state和p ...

  7. POJ 1062：昂贵的聘礼

    昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 40715   Accepted: 11839 Descripti ...

  8. Linux环境创建交换分区

    最近在准备在移动端跑一下深度学习训练好的模型,在RK3399的板子上安装scipy时报错.网上查了一下,由于内存不足导致,做个交换分区就搞定了.那么如何做交换分区呢.话不多说,直接开撸. ------ ...

  9. 8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系

    一. PropTypes 与 DefaultProps 官方文档 1. PropTypes 属性校验 引入 PropTypes import PropTypes from 'prop-types'; ...

  10. python的debug神器PySnooper

    同事给我推荐了这个调试神器,一直没工夫看,今天看了下. 原文链接: 史上最方便的Python Debug工具|腾讯技术说 体验了下,感觉最好的用法:1.优先逐行调试:2.一些复杂状态处理或者偶现的bu ...