第一种情况就是宽高都写在样式表里,就比如#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. Python 文件操作模块 shutil 详解

    1.导入模块 shutil import shutil 2.shutil方法 2.1 shutil.copy(src,dst) //将 src 复制到 dst 保留文件权限    例:将Alan复制到 ...

  2. transition和animation动画简介

    本文介绍CSS动画的两大组成部分:transition和animation.我不打算给出每一条属性的详尽介绍,那样可以写一本书.这篇文章只是一个简介,帮助初学者了解全貌,同时又是一个快速指南,当你想不 ...

  3. InvoiceCancelSendApAction

    package nc.ui.pu.m25.action; import java.awt.event.ActionEvent; import nc.bs.framework.common.NCLoca ...

  4. ASP.Net Core 运行在Linux(Ubuntu)

    这段时间一直在研究asp.net core部署到linux,今天终于成功了,这里分享一下我的部署过程. Linux Disibutaion:Ubuntu 14.04 Web Server:nginx. ...

  5. freemarker.core.InvalidReferenceException: Expression stackObject.value.get(propertyName).toString() is undefined

    很奇怪的报错, 在实体中添加 toString方法后, 想在前台列表中使用 <s:debug标签调试, 发现报错如下: freemarker.core.InvalidReferenceExcep ...

  6. ASP.NET MVC模型绑定的6个建议(转载)

    ASP.NET MVC模型绑定的6个建议 发表于2011-08-03 10:25| 来源博客园| 31 条评论| 作者冠军 validationasp.netmvc.netasp 摘要:ASP.NET ...

  7. ###《Effective STL》--Chapter1

    点击查看Evernote原文. #@author: gr #@date: 2014-09-12 #@email: forgerui@gmail.com Chapter1 容器 Topic 4: 调用e ...

  8. JavaScript学习笔记(4)——JavaScript语法之变量

    一.变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume). 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做 ...

  9. GDI+中发生一般性错误之文件被占用

    有多种原因可能导致这个异常出现,比如创建文件的权限不足.文件被占用等. 这里提供一个使用Stream读取图片避免文件被占用的方法. public Image GetImageFromStream(st ...

  10. OC6_字符串练习

    // // QFString.h // OC6_字符串练习 // // Created by zhangxueming on 15/6/10. // Copyright (c) 2015年 zhang ...