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. js便签笔记（12）——浏览TOM大叔博客的学习笔记 part2

    1. 前言 昨天写了<js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1>,简单记录了几个问题.part1的重点还是在于最后那个循环创建函数的问题,也就是多个子函数公用一个闭 ...

  2. 对动态加载javascript脚本的研究

    有时我们需要在javascript脚本中创建js文件,那么在javascript脚本中创建的js文件又是如何执行的呢?和我们直接在HTML页面种写一个script标签的效果是一样的吗?(关于页面scr ...

  3. 面试：atoi和itoa的实现

    1.int atoi(const char* src) nullptr指针 空白字符' ','\t','\n' 符号位 避免值溢出 出错信息保存在全局变脸errnum中 ; int atoi(cons ...

  4. Solidity遍历

    实际上,映射对于存储地址的标记值非常有用. 我们在许多合约中都看到了它们,它们通常以这种方式定义: mapping (address => uint) public users; 由于映射是公共 ...

  5. 使用显式的Lock对象取代synchronized关键字进行同步

    Java SE5的java.util.concurrent类库还包含有定义在java.util.concurrent.locks中的显式的互斥机制.Lock对象必须被显式地创建.锁定和释放.因此,它与 ...

  6. <Think Python>中统计文献单词的处理代码

    def process_line(line, hist):    """Adds the words in the line to the histogram. Modi ...

  7. Apache 源码安装

    8.20]# make[root@yahoo pcre-8.20]# make install 二.安装apache1.下载httpd-2.4.3.tar.gz,地址是:http://httpd.ap ...

  8. java虚拟机学习-Java常量池理解与总结(13-2)

    一.相关概念 什么是常量用final修饰的成员变量表示常量,值一旦给定就无法改变!final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. Class文件中的常量池在Clas ...

  9. spinnaker自动发布k8s部署应用<一>

    一.准备环境 !docker-ce---17.06.2-ce !k8s集群----1.11.1 !helm部署工具---helm-v2.10.0 !spinnaker-charts---spinnak ...

  10. vue-cli 使用Mint-UI

    在安装好的vue-cli的项目基础上,安装Mint-UI cnpm install mint-ui -save //引入全部组件import Mint from 'mint-ui'import 'mi ...