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. 走进javascript——被忽视的DOM方法和属性

    isEqualNode() isEqualNode方法可以用来判断两个DOM节点是否相同,给我的第一感觉是没用,因为两个DOM的比较很容易让人想成是字符串的比较,心想直接用两个等号不就可以了吗,但马上 ...

  2. es-08-hadoop集成

    1, 版本匹配: https://www.elastic.co/guide/en/elasticsearch/hadoop/current/requirements.html 2, maven集成: ...

  3. Linux-(type,vim)

    type命令 1．命令格式: type [参数][命令] 2．命令功能: 使用 type 命令轻松找出给定的命令是否是别名.shell 内置命令.文件.函数或关键字.也可以找到命令的实际路径. 3．命 ...

  4. 简单Demo 使用Code Fisrt步骤

    使用Code Fisrt步骤 1.开启VS,创建控制台项目:CodeFirstDemo1 2.利用NuGet引进 Entity Framework类库          图住:右击项目名称,在弹出的选 ...

  5. IDA动态调试so文件出现SIGILL

    用ida6.6 调试android的so文件时经常会报SIGILL的错误,意思是指令非法.而且这种错误基本都是发生在系统函数内部,像我遇到过的mmap,fopen,fgets等等.在这些函数内部如果用 ...

  6. multiset多重集合容器（常用的使用方法总结）

    关于C++STL中multiset集合容器的学习,看别人的代码一百遍,不如自己动手写一遍. multiset多重集合容器和set集合容器的使用方法大多相同,不同的是multiset多重集合容器允许重复 ...

  7. 为什么IIS的应用池回收设置默认为1740分钟-20180720

    [非原创,个人收集,希望大家有感触] 你可曾留心过IIS的应用池回收设置默认值是多少?1740分钟对吗,那么为什么会是这样的数值呢? 在asp.net的某篇博客里提到了这个问题. 有关微软产品的许多决 ...

  8. TCP Socket Http关系

    理解Tomcat内部处理网络数据的机制同时需要了解相关的一些术语,这样我们在阅读源码的时候能更加清楚的理解Connector下使用到的Socket通信原理. TCP/IP: 数据在网络传输是基于TCP ...

  9. 面试问题：你了解Java内存模型么（Java7、8、9内存模型的区别）

    Java内存模型是每个java程序员必须掌握理解的,这是Java的核心基础,对我们编写代码特别是并发编程时有很大帮助.由于Java程序是交由JVM执行的,所以我们在谈Java内存区域划分的时候事实上是 ...

  10. Gson 使用和原理

    使用教程: http://blog.csdn.net/axuanqq/article/details/51441590 http://www.jianshu.com/p/fc5c9cdf3aab 源码 ...