一、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. Swap Nodes in Pairs leetcode

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  2. 在LaTeX 与 LyX 中设置“Contents”为“目录”

    在 LaTeX 中,目录一般被显示为英文"Contents",因此需要设置成"目录". 通常在 Preamble 按照如下方式设置: \renewcommand ...

  3. ThinkPhp框架:验证码功能

    Think\Verify类可以支持验证码的生成和验证功能. 为了显示这个验证码功能,第一要有控制器,再就是有方法,然后是显示的页面. 一.最简单的方式生成验证码 (1)我们还是继续在那个控制器编写方法 ...

  4. 百度api使用心得体会

    最近项目中在使用百度地图api,对于其中的一些有用的点做一些归纳整理,如有不对的地方,欢迎各位大神纠正指出. 一定要学会查找百度地图api提供的类参考网站:http://lbsyun.baidu.co ...

  5. Android OS体系结构详解

    Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用软件组成,号称是首个为移动终端打造的真正开放和完整的移动软件. 架构详解 下 ...

  6. CentOS 安装mysql-5.7.10(glibc版)

    注:所有shell命令都以root用户执行. 一.下载 shell> cd /home/user/Downloads shell> wget http://mirrors.sohu.com ...

  7. ListView的简单使用

    首先在主界面建立一个ListView的布局

  8. JavaScript当页面关闭时向后台发送请求

    今天做项目时遇上一个需求,当浏览器或页面关闭时将数据存储到数据库内.实现思想是采用js监测onunload然后发送请求.结果失败,刷新可以发送但是关闭并不能,整了一整天并没有解决,最后找到了解决办法. ...

  9. 微信JS分享功能--微信JS系列文章(二)

    概述 在上一篇文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的分享功能进行描述,供大家参考. 代码 $(document).ready(f ...

  10. 使用javascript解一道关于会议日程安排的面试题

    这道面试题是从 HarrisonHao 的一篇博文中看到的:原文链接 我看到之后,感觉此题十分有趣,遂自己用 node.js 以不同的思路实现了一遍,实现中使用了 lodash 原题比较长,而且是英文 ...