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. 【IT笔试面试题整理】丑数

    [试题描述]我们把只包含因子2.3和5的数称作丑数.求按从到大的顺序的第1500个丑数.例如6,8是丑数,而14不是,因为它包含因子7.习惯上把1当作第一个丑数. 根据丑数的定义,丑数应该是另一个丑数 ...

  2. FFmpeg在JAVA中的使用-音频提取&字幕压缩

    由于项目需求中涉及到视频中音频提取,以及字幕压缩的功能,一直在研究ffmpeg,仅仅两个功能,却深受ffmpeg的折磨. 今天谈谈ffmpeg在java中的简单使用,首先下载FFmpeg包,官方地址: ...

  3. SVN问题之——org.apache.subversion.javahl.ClientException: Attempted to lock an already-locked dir(网摘文)

    一.问题描述 今天在 Eclipse 中用 SVN 插件提交代码时遇到 org.apache.subversion.javahl.ClientException: Attempted to lock ...

  4. 启动SpringBoot项目

    Eclipse创建Spring Boot项目 1.访问http://start.spring.io/ 解压引入Maven项目 2.建议的目录结构 com +- example +- myproject ...

  5. java设计模式-----22、状态模式

    概念: State模式也叫状态模式,是行为设计模式的一种.State模式允许通过改变对象的内部状态而改变对象的行为,这个对象表现得就好像修改了它的类一样. 根据这个概念,我们举个例子 public c ...

  6. HTML 代码复用实践

    前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果是制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了 ...

  7. JS数组和对象的浅拷贝和深拷贝

    共勉~ 在许多编程语言中,传递参数和赋值是通过值的直接复制或者引用复制完成的.在JavaScript中,对于值是直接进行复制还是引用复制在语法上是没有区别的,完全是根据值的类型来决定的. 在JavaS ...

  8. css 解决图片下小空隙问题

    http://baijiahao.baidu.com/s?id=1581004863053583633&wfr=spider&for=pc 这篇讲的挺清楚,也有解决办法

  9. 有关正则表达式的Js方法（replace）

    整理一下最近常用的几个有关正则的js方法 replace 语法:stringObject.replace(regexp/substr,replacement) 用法1 const str='abc13 ...

  10. 新飞电器的BI建设案例

    一.河南新飞电器简介 河南新飞电器在制造行业内属于领先地位,其信息化程度较高,面对系统多且杂乱的情况,一个集中展示数据的平台就显得尤为重要.使用BI就是为了在一个相对统一的平台展示需要查看的数据,供决 ...