第一种情况就是宽高都写在样式表里，就比如#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. mysql二进制包安装和遇到的问题

    一.编译安装 tar -zxf mysql-5.5.32-linux2.6-x86_64.tar.gz mv mysql-5.5.32-linux2.6-x86_64 /application/mys ...

  2. 基于对象的跨表查询，多对多查询，多对多操作，聚合查询和分组查询，F查询和Q 查询

    基于对象的跨表查询 一对多查询(班级表和学生表) 表结构创建 class Class(models.Model): id = models.AutoField(primary_key=True) cn ...

  3. [笔记]Go语言写文件几种方式性能对比

    Go语言中写文件有多种方式,这里进行如下几种方式的速度对比: 打开文件,写入内容,关闭文件.如此重复多次 打开文件,写入内容,defer 关闭文件.如此重复多次 打开文件,重复多次写入内容,defer ...

  4. 用python实现一个计算器

    import re def atom_cal(exp): # 计算乘除法 if '*' in exp: a,b = exp.split('*') return str(float(a) * float ...

  5. 【Flask】WTForms文件上传下载

    # 文件上传笔记:1. 在模版中,form表单中,需要指定`encotype='multipart/form-data'`才能上传文件.2. 在后台如果想要获取上传的文件,那么应该使用`request ...

  6. 基于HTML5和SVG的手机菜单动画

    在线演示 本地下载

  7. 广度优先搜索 BFS算法

    广度优先搜索算法(Breadth-First-Search,BFS),又称作宽度优先搜索.BFS算法是从根节点开始,沿着树的宽度遍历树的节点.如果所有节点均被访问,则算法中止. 算法思想 1.首先将根 ...

  8. javascript-实现简单瀑布流

    直接上代码: <style> *{ margin:0; padding:0; } .waterfall_item{ border:solid 3px #ccc; box-shadow:1p ...

  9. DCU IP Prefether

    DCU IP Prefether 数据高速缓存单元预取I P 设置.如果设置为E n a b l e d,会预取I P 地址以改善网络连接和系统性能,所以建议选择E n a b l ed.选项:E n ...

  10. spark启动

    注意在启动spark时候要指定参数 要不就死启动的单机版的 /usr/local/spark-1.5.2-bin-hadoop2.6/bin/spark-shell \ --master spark: ...