第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。

小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。


在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应的(就像#div1.style.width对
应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。

代码:
var o = document.getElementById("view");
var h = o.offsetHeight;  //高度
var w = o.offsetWidth;  //宽度

本文转自:http://www.cnblogs.com/zhwl/p/3858682.html

原生js获取Html元素的实际宽度高度的更多相关文章

  1. js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  2. [JavaScript] js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通 过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. ...

  3. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  4. 原生js获取子元素

    感谢原文作者:归一山人 原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html 获取子元素的方法有 //获取第一个demo类 dom = d ...

  5. 原生js获取子元素、给元素增加div

    //鼠标移入移出动画 解决页面闪屏问题 window.onload = function () { var el = document.createElement('div'); el.classNa ...

  6. js获取浏览器body或窗宽度高度合集

    <script type="text/javascript"> var s = " "; document.documentElement.scro ...

  7. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  8. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  9. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

随机推荐

  1. [Skills] 在桌面打开一个BAT文件,CMD窗口不关闭

    每次开机都要取得本机IP,然后远程连接上去,屏幕太小,不好输入,想写个bat,执行就能看到IP,并且停留在cmd窗口上,想来简单,以前搜了好久没找到好的办法,今天找到一个贴子,竟然可以,呵呵!   以 ...

  2. 配置ogg目录索引-oracle与mysql的双向同步步骤

    以下几篇文章描述了利用ogg对oracle与mysql进行双向同步的配置过程以及注意事项,欢迎参考. 配置ogg异构oracle-mysql(1)基础环境配置 http://www.cnblogs.c ...

  3. 第十八篇:在SOUI中实现PreTranslateMessage

    在MFC中,通常可以通过重载CWnd::PreTranslateMessage这样一个虚函数来实现对一些窗口消息的预处理.多用于tooltip的显示控制. 在SOUI中也实现了类似的机制. 要在SOU ...

  4. Win7 Object_Header之TypeIndex解析

    在暴力搜索内存进程对象反隐藏进程这篇文章中,我们提到: Object Header偏移0×008处Type成员为对象类型值,相同类型的对象具有相同的值.  自Window  7开始, _OBJECT_ ...

  5. LoadRunner关联之学习笔记

    去银行办业务,进银行的门,大堂经理给你一张业务号,拿着这张业务号,去柜台办理业务.--录制下来 第二天又去银行,还是拿着这张业务号,去柜台办理业务,柜员就不理你了,因为这张业务号是昨天的.--回放过程 ...

  6. Loadrunner在场景中添加多个负载机报错:Action.c(38): Error -26488: Could not obtain information about submitted解决方法

    Error -26488: Could not obtain information about submitted file "E:\.jpg": _stat32 rc=-1, ...

  7. ViewPager的广告条轮播

    首先布局 <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:androi ...

  8. ember.js:使用笔记1-数组数据统一显示

    ember中数据一般都是以array的形式存储的,控制器使用,如: App.DataController = Em.ArrayController.extend({}); 想要在一个页面中输出所有的数 ...

  9. Codeforces Round #348(VK Cup 2016 - Round 2)

    A - Little Artem and Presents (div2) 1 2 1 2这样加就可以了 #include <bits/stdc++.h> typedef long long ...

  10. webservice 学习笔记

    1.webservice的概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...