offsetwidth111[通俗易懂]

offsetwidth是包括border、padding等,即盒模型尺寸。(所以遇到offsetWidth和border同时出现的时候要考虑一下会不会导致出错)一个小实验当div宽高200px,border为1px的时候,在给div添加一个变窄的定时器事件的时候,使用语句:div.style.width=div.offfsetWidth-1+‘px’,会发现,div在变宽。究其原因:s…

大家好,又见面了,我是你们的朋友全栈君。

offsetwidth是包括border、padding等,即盒模型尺寸。(所以遇到offsetWidth和border同时出现的时候要考虑一下会不会导致出错
一个小实验
当div宽高200px,border为1px的时候,在给div添加一个变窄的定时器事件的时候,使用语句:div.style.width = div.offfsetWidth -1+‘px’,会发现,div在变宽。
究其原因:style.width为200是毋庸置疑的,可是,offsetWidth却是(200+1+1)=202,所以在第一次语句执行之后,style.width = 202-1+‘px’=201px;这就是div变宽的原因,接下来的第二次第三次执行以此类推。

解决:①比较繁琐的一个解决方法,是在div的行间样式中设置width,然后在赋值语句中的右边改成parseInt(div.style.width),也可以完成功能实现。
②通过封装获取style的方法,当有行间样式的时候就获取行间的数据,当在样式表中则获取样式表中width的值

function getStyle(obj,name){  //包了一个函数,解决不同浏览器的兼容性问题
        if(obj.currentStyle){
            return obj.currentStyle[name]; //currentStyle只兼容IE,不兼容火狐和谷歌
        }else{
            return getComputedStyle(obj,false)[name];//getComputedStyle是兼容火狐谷歌,不兼容IE
            //JS运动应用-1
        }
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/129592.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 详解卡尔曼滤波原理[通俗易懂]

    详解卡尔曼滤波原理[通俗易懂]详解卡尔曼滤波原理  在网上看了不少与卡尔曼滤波相关的博客、论文,要么是只谈理论、缺乏感性,或者有感性认识,缺乏理论推导。能兼顾二者的少之又少,直到我看到了国外的一篇博文,真的惊艳到我了,不得不佩服作者这种细致入微的精神,翻译过来跟大家分享一下,

    2022年6月15日
    33
  • pycharm python interpreter_pycharm interpreter

    pycharm python interpreter_pycharm interpreter1,首先我们肯定要在Pycharm里建立一个新项目,有两个选项,一个建立新的虚拟的环境,一个基于已有的环境这里选择第一项。2,选择第一项之后会有两个解释器,一个虚拟的即location/venv/Scripts/python.exe,另一个需要基解释器即本地解释器/python.exe。关于第一项的解释我极力推荐此篇文章虚拟解释器的简单说明3,然后,如果在创建pycharm项目时项目解…

    2022年8月26日
    2
  • MD5 编码 转换

    MD5 编码 转换

    2021年5月9日
    218
  • python闭包详解_Python进阶

    python闭包详解_Python进阶闭包首先了解一下:如果在一个函数的内部定义了另一个函数,外部的我们叫他外函数,内部的我们叫他内函数。在一个外函数中定义了一个内函数,内函数里运用了外函数的临时变量,并且外函数的返回值是内函数的引用

    2022年7月31日
    3
  • selenium webdriver下载_webdriver怎么读

    selenium webdriver下载_webdriver怎么读地址:http://npm.taobao.org/mirrors/chromedriver/下载完对应的webdriver后,放到python目录下的Scripts文件夹内测试示例:fromseleniumimportwebdriver#测试用例1driver=webdriver.Chrome()如果能够打开浏览器就表示成功,如果报错Thisversiono…

    2022年9月19日
    0
  • Spring AOP详细介绍

    Spring AOP详细介绍AOP称为面向切面编程,在程序开发中主要用来解决一些系统层面上的问题,比如日志,事务,权限等待,Struts2的拦截器设计就是基于AOP的思想,是个比较经典的例子。一AOP的基本概念(1)Asp

    2022年7月2日
    22

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号