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

相关推荐

  • uwsgi是什么_uwsgi怎么读

    uwsgi是什么_uwsgi怎么读uWSGI是实现了了uwsgi和WSGI两种协议的Web服务器器Web应⽤用的本质就是:1. 浏览器器发送⼀一个HTTP请求;2. 服务器器收到请求,⽣生成⼀一个HTML⽂文档;3. 服务器器把HTML⽂文档作为HTTP响应的Body发送给浏览器器;4. 浏览器器收到HTTP响应,从HTTPBody取出HTML⽂文档并显示。所以,最简单的Web应⽤用就是先把HTML⽤用⽂文件保存好,⽤用…

    2022年9月3日
  • 【本·伍德Lua专栏】补充的基础09:使用table.concat将一个大的字符串

    【本·伍德Lua专栏】补充的基础09:使用table.concat将一个大的字符串

    2022年1月10日
  • windows10修改host文件_手机修改hosts文件

    windows10修改host文件_手机修改hosts文件Windows修改host文件在实际的开发中,有时我们会修改windows的hosts文件,达到指定域名映射到指定ip上的功能。修改方式如下:1.windows中hosts文件位置(win10):C:\Windows\System32\drivers\etc\hosts2.修改方式#将www.aaa.com域名映射到127.0.0.1IP地址上127.0.0.1www.aaa.com3.应用在不用重启系统情况下,应用修改后的hosts文件,打开

    2022年10月12日
  • Java重置_java设置定时任务一小时执行一次

    Java重置_java设置定时任务一小时执行一次我想有一个java.utils.Timer与一个可重置时间在java.I需要设置一次off事件发生在X秒。如果在创建定时器的时间和X秒之间没有发生任何事情,则事件会正常发生。然而,如果在X秒之前,我决定该事件应该发生在Y秒后,然后我想要能够告诉定时器重置其时间,以便事件发生在Y秒。例如。定时器应该能够做以下事情:Timertimer=newTimer();timer.schedule(ti…

    2022年9月18日
  • idea在mac版怎么配置svn_IntelliJ Idea 集成svn 和使用

    idea在mac版怎么配置svn_IntelliJ Idea 集成svn 和使用最近公司的很多同事开始使用IntelliJIdea,便尝试了一下,虽然快捷键与eclipse有些不同,但是强大的搜索功能与“漂亮的界面”(个人认为没有eclipse好看),还是值得我们去使用的。刚开始使用的idea要去集成svn,下载公司的项目。我是用的是TortoiseSVN(小乌龟),下载后安装,然后记住安装路径,我安装的是64位的。TortoiseSVN的下载地址:htt…

    2022年10月17日
  • c6000 中断小结

    c6000 中断小结1. 中断相关概念中断过程———————————–你在下象棋,突然电话响了,你回屋接电话,然后回来继续下象棋,这个过程就叫做中断响应过程。CPU执行正常任务———————下象棋保护现场———————————-你已经想好要“将军”,先在脑海中记下来。中断

    2022年6月16日

发表回复

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

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