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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 利用JS跨域做一个简单的页面訪问统计系统

    利用JS跨域做一个简单的页面訪问统计系统

    2021年12月8日
  • es6模板字符串和占位符${}「建议收藏」

    es6模板字符串和占位符${}「建议收藏」描述:  模板字符串使用反引号()来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(KaTeXparseerror:Expected’EOF’,got’&’atposition20:…ression})的占位符。&̲emsp; &ems…{}放变量…

    2022年8月21日
  • Vue上传图片并展示

    Vue上传图片并展示上传图片并展示

    2022年6月18日
  • Matlab画三维图_读书笔记图画

    Matlab画三维图_读书笔记图画plot3基本的三维曲线图绘制plot3(x,y,z),x,y,z均为相同长度的向量,会得到三个向量相同下标构成的的三维坐标(xi,yi,zi)(i=1~n)连的曲线plot3(X,Y,Z),X,Y,Z均为相同大小的矩阵,均为m*n的矩阵时,plot3命令将绘得m条曲线,每条曲线均为X,Y,Z列向量为(x,y,z)坐标值的曲线例三维圆柱形螺旋线,x,y,z均为相同长度的向量cl

    2022年10月11日
  • UNIX命令

    UNIX命令 一、UNIX命令格式1、UNIX命令提示符   在命令行下,操作系统会显示一提示符,提示用户在此提示符后可以输入一行命令。不同的Shell有不同的缺省提示符:       BShell和KShell的缺省提示符为”$”;       CShell的缺省提示符为”%”;       但当以root用户登录时,系统提示符统一缺省为”#”。用户可以更改自己的缺省Shell和提

    2022年6月1日
  • 用MDK生成bin文件的步骤及方法

    用MDK生成bin文件的步骤及方法1用MDK生成bin文件Embest徐良平在RVMDK中,默认情况下生成*.hex的可执行文件,但是当我们要生成*.bin的可执行文件时怎么办呢?答案是可以使用RVCT的fromelf.exe工具进行转换。也就是说首先将源文件编译链接成*.axf的文件,然后使用fromelf.exe工具将*.axf格式的文件转换成*.bin格式的文件。下面将具体

    2022年10月20日

发表回复

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

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