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. 轻量级web富文本框——wangEditor使用手册（1）——基本应用 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  2. GNU的编译器

    GNU的编译器可以编译C或C++语言, 编译C语言使用gcc,编译C++语言使用g++ 如果是使用Linux或者Unix系统(Mac)可以使用以下命令: gcc -v 或者 g++ -v 来查看是否安 ...

  3. SpringBoot入门 (十一) 数据校验

    本文记录学习在SpringBoot中做数据校验. 一 什么是数据校验 数据校验就是在应用程序中,对输入进来得数据做语义分析判断,阻挡不符合规则得数据,放行符合规则得数据,以确保被保存得数据符合我们得数 ...

  4. Java NIO系列教程（五） 通道之间的数据传输

    在Java NIO中,如果两个通道中有一个是FileChannel,那你可以直接将数据从一个channel(译者注:channel中文常译作通道)传输到另外一个channel. transferFro ...

  5. Windows Mobile设备操作演示准备工作小记

    公司最近为PDA开发了一款作业程序,我在工作中常常需要将操作过程通过电脑上设影出来为客户讲解使用方法.本文记录了相关的准备工作. 1. 微软嵌入式操作系统体系 RTOS: Embedded Real ...

  6. python的Web框架：初识Django

    web应用程序 本质 socket服务端 浏览器本质是一个socket客户端 1. 服务器程序 socket请求 接受HTTP请求,发送HTTP响应. 比较底层,繁琐,有专用的服务器软件,如:Apac ...

  7. POJ 2419 Forests（模拟）

    题目链接: https://cn.vjudge.net/problem/POJ-2419 题目描述: If a tree falls in the forest, and there's nobody ...

  8. ZOJ Problem Set - 3878 Convert QWERTY to Dvorak

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

  9. 在window环境下挂载mysql数据卷

    1.提前在指定的目录下创建一个my.cnf文件,目录名最好为英文且不带特殊符号和空格,文件内容如下,注意:粘贴时要把每一行末尾的空格去除,否则运行时会报错说utf8编码错误 [mysqld] user ...

  10. C++切割文件

    void CFileCutter::DoSplit() { ; //计数 CString strSourceFile = m_strSource; //取得全局变量赋值给局部变量,方便操作 CStri ...