第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。

小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。

现 在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应的(就像#div1.style.width对 应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。

js 获取元素宽的更多相关文章

  1. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  2. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  3. js 获取元素宽高

    可以用源生js的.offsetHeight .offsetWidth属性 document.getElementById("temp_form").offsetHeight // ...

  4. js获取元素宽高、位置相关知识汇总

    常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...

  5. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  6. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  7. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  8. js获取元素提示信息

    js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...

  9. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

随机推荐

  1. 自己写的一个简单PHP采集器

    自己写的一个简单PHP采集器 <?php //**************************************************************** $url = &q ...

  2. Keepalived 服务器状态监测

    keepalived简介: keepalived是一个类似于layer3, 4 & 5交换机制的软件,也就是我们平时说的第3层.第4层和第5层交换.Keepalived的作用是检测web服务器 ...

  3. Linux中top和free命令(6/15)

    top:命令提供了实时的对系统处理器的状态监视.它将显示系统中CPU最“敏感”的任务列表. 该命令可以按CPU使用.内存使用和执行时间对任务进行排序: 而且该命令的很多特性都可以通过交互式命令或者在个 ...

  4. ReactNative之Android打包APK方法(趟坑过程)

    欢迎大家加群讨论 点击链接加入群[ReactNative-解决问题交流群] :644124441 点击链接加入群[ReactNative技术交流群2] :687663534 多余的不解释了.直接上车吧 ...

  5. SpringBoot AOP示例

    AOP主要注解: @Aspect,作用在类上,说明这是一个Aspect切面类. @Pointcut,用来描述,你需要在哪些类的哪些方法中植入你的代码. @Adive,与Pointcut配合使用,主要说 ...

  6. no matching key exchange method found. Their offer: diffie-hellman-group1-sha1

    1. 使用git克隆项目报错 $ git clone ssh://liuchao@192.168.7.32:29418/platform/Midou Cloning into 'Midou'... U ...

  7. MyBatis无限输出日志

    最近在项目中使用mybatis与spring集成,由于项目使用maven分模块打包,经常遇到mybatis mapper少配置子模块或者maven pom中忘记引用子模块导致的mybatis加载不到d ...

  8. Android中getDimension,getDimensionPixelOffset和getDimensionPixelSize 区别

    getDimension 获取某个dimen的值,如果是dp或sp的单位,将其乘以density,如果是px,则不乘   返回float getDimensionPixelOffset 获取某个dim ...

  9. 资源(GitHub)

    angular 文档 https://angular.cn/docs/ts/latest/quickstart.html   http://sc.qq.com/fx/u?r=OfFE5AA ios h ...

  10. Python 导出数据from Mysql

    环境 Anaconda3 Python 3.6, Window 64bit 目的 从MySQL数据库读取目标表数据,并处理 代码 # -*- coding: utf-8 -*- import pand ...