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. WPF中Grid的行的Height和列的Width根据内容自适应

    Grid中RowDefinition的Height和ColumnDefinition的设置都有三种: 1. 具体数值,固定不变: 2. * 星号,如: 2*,5*,8*: 分母为(2+5+8=15), ...

  2. Docker轻量级web图形页面管理 - Portainer部署记录

    Docker图形页面管理工具基本常用的有三种: Docker UI,Shipyard,Portainer,之前分别介绍了Docker UI和Shipyard部署,下面简单介绍下Portainer部署. ...

  3. ZOJ Problem Set - 3878 Convert QWERTY to Dvorak

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3878 /* 问题 很有意思的一道题目,纯模拟,注意细节和最后一 ...

  4. [C#]System.Timers.Timer(2)

    摘要 之前学习过c#中定时器Timer的基本用法,在使用过程中,有一个问题,一直困扰着自己,就是在初始化定时器的时候,如果设置的interval过小,或者每次执行的业务非常耗时的时候,这时候该怎么处理 ...

  5. 关于 luv_letters

    luv_letters是一枚现高二文化课菜鸡,是一枚临汾一中联赛oier(我太菜了),也是一名Cher. (好像没有好的地方 真名不提跟某个当红女明星一样(正经汉子不女装 话说当初选择竞赛科目的时候( ...

  6. Selenium使用总结（Java版本）

    硒在最近的发展中被广泛应用,因为它以前没有被使用过,并且已经走了太多的坑.这是一张唱片. 1.环境配置 配置要点: 1.Web驱动程序应该与浏览器版本相对应,chrome使用chrome驱动程序和ch ...

  7. Linux创建用户等操作

    转自: https://www.linuxidc.com/Linux/2017-06/144916.htm 与大家分享下Linux系统中创建用户.设置密码.修改用户.删除用户的命令,希望对你有所帮助. ...

  8. 理解JVM之垃圾收集器详解

    前言 垃圾收集器作为内存回收的具体表现,Java虚拟机规范并未对垃圾收集器的实现做规定,因而不同版本的虚拟机有很大区别,因而我们在这里主要讨论基于Sun HotSpot虚拟机1.6版本Update22 ...

  9. SPOJ7001(SummerTrainingDay04-N 莫比乌斯反演)

    Visible Lattice Points Consider a N*N*N lattice. One corner is at (0,0,0) and the opposite one is at ...

  10. POJ2533(KB12-N LIS)

    Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 50827   Acc ...