JS获取元素宽高分两种情况，

一、内联样式，也就是直接把width和height写在HTML元素中的style里：

　　这种情况使用     document.getElementById('xxx').style.width即可获取宽度（高度同理）

二、写在CSS样式表中，这种情况使用 document.getElementById('xxx').style.width是获取不到的

　　应使用 document.getElementById('xxx').currentStyle.width 来获取

JS获取元素宽高的两种情况的更多相关文章

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

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

  2. js 获取元素宽高

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

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

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

  4. js 获取元素宽

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

  5. 滚动加载图片（懒加载）实现原理（这是旧实现，仅做为获取元素宽高api的参考）

    https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...

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

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

  7. Activity启动过程中获取组件宽高的五种方式

    第一种:(重写Activity的onWindowFocusChanged方法) /** * 重写Acitivty的onWindowFocusChanged方法 */ @Override public ...

  8. 微信小程序之动态获取元素宽高

    我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...

  9. js获取各种宽高方法

    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...

随机推荐

  1. Vue笔记：使用 Yarn 管理依赖包

    上年10月份, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm ,它比npm更快.更高效. Yarn VS npm 1.yarn.lock 文件 在 npm 中同样 ...

  2. 代理模式——java设计模式

    代理模式(Proxy Pattern) GoF中给出的代理模式的定义为: 代理模式给某一个对象提供一个代理或占位符,并由代理对象来控制对原对象的访问. 代理模式的英文叫做Proxy或Surrogate ...

  3. UML类图示例

  4. A Game（区间DP）

    Little Hi and Little Ho are playing a game. There is an integer array in front of them. They take tu ...

  5. 计算文章作品发布时间的php代码

    /* 计算发布时间据当前时间 如1秒前 1分钟前 1小时 1天 1个星期 1个人月 1年 */ function format_dates($time) { if($time <= 0) ret ...

  6. 【angular5项目积累总结】文件上传

    <div class="form-group row"> <label class="col-sm-2 col-form-label"> ...

  7. RadioButtonList根据值触发OnSelectedIndexChanged事件

    Insus.NET有使用Iframe来处理另外一个站点的enter form,由于需要自动循环填入数据,免去人手操作.但是原来的Enter from有RadioButtonList控件以及OnSele ...

  8. 微信小程序开发资料汇总

    >> 微信小程序开发工具下载 社区推荐: >>蜂鸟-微信小程序开发者社区>> 很快-微信小程序开发者社区 博文推荐: >> 微信小程序开源Demo精选& ...

  9. 提供PPT嵌入Winform/WPF解决方案，Winform/WPF 中嵌入 office ppt 解决方案

    Winform/WPF 中嵌入 office ppt(powerpoint)解决方案示: 1. 在winform中操作ppt,翻页.播放.退出:显示 总页数.当前播放页数 2. 启动播放ppt时录制视 ...

  10. 主键（primary key）和唯一索引（unique index）区别

    主键一定是唯一性索引,唯一性索引并不一定就是主键.  所谓主键就是能够唯一标识表中某一行的属性或属性组,一个表只能有一个主键,但可以有多个候选索引.因为主键可以唯一标识某一行记录,所以可以确保执行数据 ...