第一种情况就是宽高都写在样式表里,就比如#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. windows下搭建属于自己的web服务器

    这次需要记录一下我搭建web服务器的过程. 第一步,确定自己要使用的平台:这次我用的是windows2008 server版本 第二步,计划是想要纯手工的安装apache.php等.但是我们可以下载一 ...

  2. win7 Sendto修改

    sendto目录现在被移到了这里 %APPDATA%\Microsoft\Windows\SendTo %APPDATA%是个环境变量,具体来说是在这里: C:\users\<username& ...

  3. PHP Fatal error: Cannot pass parameter 2 by reference

    PHP Fatal error:  Cannot pass parameter 2 by reference in 这个错误的意思是:不能按引用传递第2个参数 我的理解是: 方法的第2个参数 需要传递 ...

  4. 比较ASP生成静态HTML文件的几种方法

    将动态页面转换生成静态Html文件有许多好处,比如生成html网页有利于被搜索引擎收录(特别是对接受动态参数的页面).前台访问时,脱离了数据访问,减轻对数据库访问的压力,加快网页打开速度. 当然,凡事 ...

  5. 查看源代码查找获取sd卡剩余容量的代码

    下载android源码,找到app下的Settings应用源码,导入Settings项目(android项目源码) 查找“可用空间”得到 <string name="memory_av ...

  6. idl生成.h .c文件

    1.从命令行执行 设置INCLUDE.LIB等,可先运行vsvars32.bat(C:\Program Files\Microsoft Visual Studio .NET 2003\Common7\ ...

  7. 【转】Open Live Writer 插件更新

    一.更新内容 cnblog 页签中增加 Lua 和 Matlab 语法高亮:(SyntaxHighlight 页签中尚未添加) 增加折叠区域插件,见效果展示: 增加 bat 执行文件,直接拷贝插件所需 ...

  8. ThreadLocal 设计模式浅谈

    部分代码:ThreadLocal中 的get方法, 获得的是当前线程相关的对象 /** * Returns the value in the current thread's copy of this ...

  9. linux 文本编辑器 vim 基本操作

    三种模式之间转换: 一般模式 可用于光标移动.复制粘贴.查找替换 "vim.txt"表示文件名 8L 表示8行 , 80C 表示80个字符 移动光标常用操作: h .j. k. l ...

  10. iOS调试程序时,启动应用失败的解决办法

    最近在iOS项目中调试程序,项目中用到第三方应用来启动我的应用程序,调试阶段在实体机上用第三方应用启动我的应用时,出现如下错误,程序停止运行: 同时,在AppDelegate对象的如下方法中设置断点: ...