第一种情况就是宽高都写在样式表里,就比如#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. javascript深度克隆与javascript的继承实现

    1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Arr ...

  2. [ImportNew]Java中的并发处理

    本文来源:http://www.importnew.com/14506.html 这篇文章讨论了Java应用中并行处理的多种方法.从自己管理Java线程,到各种更好几的解决方法,Executor服务. ...

  3. MATLAB基础入门笔记

    为了参加那个电工杯,豁出去啦,时间真的很短,但是得挑战呀..对于MATLAB编程,有一些了解,MATLAB(矩阵实验室的简称)是一种专业的计算机程序,用于工程科学的矩阵数学运算,说说它的开发环境. 任 ...

  4. WordPress 后台提示输入FTP信息

    Wordpress 安裝主題時,需要輸入ftp訊息 參考了:WordPress后台更新提示输入FTP信息 ,解決方法是: 方法一.通過ssh 對wordpress 項目的文件夾賦權限 sudo cho ...

  5. 【转】oracle的substr函数的用法

    [转]oracle的substr函数的用法 )     would return 'The' ) value from dual

  6. 将多维数组转换为支持curl提交的一维数组格式

    /** * @desc 多维数组转化为支持curl提交数组 * @author lytian 2013-06-29 */ public function toPost(array $params = ...

  7. 第九篇、CSS布局

    <!--css布局 标准流:从上到下 从左到右 脱离标准流:(浮在父控件的最左边或者最右边)(类似ios在window上添加的控件) 1.float: 2.position: absolute( ...

  8. [jquery]高级篇--获取div子元素

    参考: http://zhidao.baidu.com/link?url=IfeQQBn1xMLqWvwdkKbQYJ8mC6ciGi_8M1NYkm6iQ-kXBMX2f2ylN-ckzFLiynn ...

  9. TLF相关资料

    1\(转)http://blog.csdn.net/hu36978/article/details/5796165 TFL 一般先创建TextFlow  通过控制flowComposer属性来控制文本 ...

  10. Codevs 1173 最优贸易 2009年NOIP全国联赛提高组

    1173 最优贸易 2009年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description [问题描述] C 国有n ...