第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通

过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中，比如，这中情况通过

上述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;  //宽度

[JavaScript] js获取Html元素的实际宽度高度的更多相关文章

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

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

  2. 原生js获取Html元素的实际宽度高度

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

  3. javascript js获取html元素各种距离方法

    //滚动条 scrollLeft//滚动条距左边距离 scrollTop//滚动条距顶部距离 scrollWidth//滚动条元素的宽 scrollHeight//滚动条元素的高 //可视范围 cli ...

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

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

  5. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  6. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  7. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  8. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  9. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

随机推荐

  1. Android 自学之自动完成文本框 AutoCompleteTextView

    自动完成文本框(AutoCompleteTextView)从EditText派生而出,实际上他也是一个编辑框,但他比普通的编辑框多了一个功能:当用户输入一定字符后,自动完成文本框会显示一个下拉菜单,供 ...

  2. 转：vim----复制粘贴

    vim有12个粘贴板,分别是0.1.2.....9.a.“.+:用:reg命令可以查看各个粘贴板里的内容.在vim中简单用y只是复制到“(双引号)粘贴板里,同样用p粘贴的也是这个粘贴板里的内容: 要将 ...

  3. Jquery选择器，操作DOM

    刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...

  4. hasLayout与Block formatting contexts的学习(下)

    BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边, ...

  5. Azure Redis Cache作为ASP.NET 缓存输出提供程序

    前一篇文章<Azure Redis Cache作为ASP.NET Session状态提供程序 >我们已经知道如何将ASP.NET应用程序Session存储在Redis Cache中,这里我 ...

  6. spring中加入log4j

    spring中加入log4j <context-param> <param-name>log4jConfigLocation</param-name> <pa ...

  7. SQLServer 2008数据库查看死锁、堵塞的SQL语句

      --每秒死锁数量 SELECT * FROM sys.dm_os_performance_counters WHERE counter_name LIKE 'Number of Deadlocks ...

  8. 经历：easyui的layout自适应高度布局

    在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢?  我就遇到了这样的情况,今天需求经理提出了一个需求:认证用 ...

  9. dorado基本事件样例

    var info = self.get("returnValue"); view.set("#labelProduct.text","产品:" ...

  10. CAF（C++ actor framework）使用随笔（projection 用法）（一）

    最近干活在写毕设,用到了CAF,看了文档,发现了一些小坑,自己摸索写点随笔.(CAF的github网站 https://github.com/actor-framework/actor-framewo ...