一、JavaScript获取html元素宽高

1.宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。
2.宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。

小结,由于clientWidthoffsetWidth 无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过i**.style.atrr来获取。
现在的前端制作很少直接把样式写style里了,都是写在样式表里。如果你要获取的样式没有相对应的(就像#div1.style.width对 应#div1.offsetWidth),就只能分别针对不用浏览器来获取样式表的属性了,可以试着搜索“JS 获取样式属性”之类的。

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

二、width、clientWidth、offsetWidth 之间的关系

width是html元素的内容宽度

clientWidth = width + padding
offsetWidth = width + padding + border

JavaScript获取html元素的实际宽度和高度的更多相关文章

  1. JavaScript获取屏幕和页面的宽度和高度

    JavaScript获取屏幕和页面的宽度和高度 1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  3. javascript 获取iframe元素的方法

    javascript  获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...

  4. js 获取浏览器显示内容的宽度和高度

      js获取浏览器显示内容的宽度和高度 CreateTime--2017年7月10日17:24:12Author:Marydon 1.获取浏览器屏幕显示d的网页宽度 /** * 得到浏览器显示的屏幕高 ...

  5. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  6. Javascript获取页面元素相对和绝对位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  7. jquery 获取元素的 实际宽度和高度

    jquery outerHeight方法 outerWidth方法 转: http://www.cnblogs.com/zhja/archive/2012/11/07/2758665.html jqu ...

  8. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  9. Javascript获取html元素的几种方法

    1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...

随机推荐

  1. 黑苹果macOS Sierra 10.12 安装教程(venue11 pro测试)

    黑苹果macOS Sierra 10.12 安装教程(venue11 pro测试) 2017-03-12 03:46:24 by SemiconductorKING PS:刚刚装好黑苹果,来记录一篇折 ...

  2. 使用Three.js网页引擎创建酷炫的3D效果的标签墙

    使用Three.js引擎(这是开源的webgl三维引擎,gitgub)进行一个简单应用. 做一个酷炫的3d效果的标签墙(已经放在我的博客首页,大屏幕可见), 去我的博客首页看看实际效果 www.son ...

  3. 1491: [NOI2007]社交网络

    1491: [NOI2007]社交网络 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 881  Solved: 518[Submit][Status] ...

  4. 腾讯云数据库团队:MySQL数据库的高可用性分析

    作者介绍:易固武,腾讯高级工程师,参与腾讯账号安全建设,腾讯数据仓库(TDW)优化改造,腾讯云数据库等项目,对大规模分布式存储和计算系统有浓厚的兴趣和经历 MySQL数据库是目前开源应用最大的关系型数 ...

  5. C++—this指针的用法

    this指针抽象比喻 当我们在进入一个房子之后, 可以看见房子里的桌子,椅子. 地板等,但是看不到房子的全貌.对于一个类的实例来说, 你可以看到它的成员 函数. 成员 变量, 但是实例本身呢? thi ...

  6. WCF请求数据:已超过传入消息(65536)的最大消息大小配额。若要增加配额,请使用相应绑定元素上的 MaxReceivedMessageSize 属性。

    通常情况下,写好WCF服务后都会用自带的WCFClient工具进行测试,在进行时数据请求的时候,如果返回数据量超过默认接收值的时候就会提示如图异常错误. 错误也提示的很清楚,无非就是修改接收值大小的问 ...

  7. 如何修改SVN客户端中保存的密码

    本文主要讲述Linux命令行下怎么修改已经保存的客户端密码: 第一步,删除 subvision文件: rm -rf ~/.subvision 第二步:执行任意需要访问服务器的svn命令,会提示是否永久 ...

  8. “倔驴”一个h5小游戏的实现和思考(码易直播)——总结与整理

    3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一 ...

  9. dos中进入其他盘中的方法

    1.在dos中进入其他盘中直接-->e: 即可,若是进入文件夹中-->cd aaa\bbb 即可. 2.返回上级目录:-->cd..

  10. java设计模式之职责链模式

    责任链模式 设计模式很多时候都是看见名字都知道意思,责任链,见名知义为请求创建一系列处理对象. 此模式基于请求的类型将请求的发送方和接收方分离.通常每个接收器包含对另一个接收器的引用.如果一个对象不能 ...