一、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. 1820: [JSOI2010]Express Service 快递服务

    1820: [JSOI2010]Express Service 快递服务 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 847  Solved: 325 ...

  2. python list 切片实验

    list[start:stop:step] >>> a_list=['hito','bb','cc','dd','ee','ff']>>> a_list[::-1] ...

  3. python 使用内置函数sorted对各种数据类型进行排序

    python有两个内置的函数用于实现排序,一个是list.sort()函数,一个是sorted()函数. 区别1:list.sort()函数只能处理list类型数据的排序:sorted()则可以处理多 ...

  4. JavaWeb之JSON

    一.什么是JSON? JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML ...

  5. 关于数据库与JAVA连接及其出现问题的解决方式

    数据库连接java的方式一共有两个 建立JDBC-ODBC桥接器 加载纯JAVA数据库驱动程序 注意: JDBC-ODBC桥接器无需下载数据库的驱动程序,但是JDK1.8已经把JDBC-ODBC桥接器 ...

  6. TCP/IP笔记(二)TCP/IP简介

    上回,主要介绍了下协议和OSI参考模型,并简单了解下网络构成要素,这回该说说TCP/IP了 互联网与TCP/IP的关系   互联网进行通信时,需要相应的网络协议,TCP/IP原本就是为使用互联网而开发 ...

  7. 关于npm安装全局模块,require时报Error: Cannot find module 'XXX'的解决办法

    系统环境:centos 下午使用npm安装"cheerio",想搞爬虫玩玩. npm安装有两种模式: 本地 # npm install cheerio 全局 # npm insta ...

  8. centos6.7搭建DHCP服务器

    centos6.7搭建DHCP服务 2017-03-24 09:47:16 系统环境: centos6.7 安装之前首先使用rpm –qa | grep dhcp查看系统中是否已安装了dhcp软件包. ...

  9. pxe+kickstart cobbler无人值守装机

    环境准备: 一台服务器 [root@admin tftpboot]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) [roo ...

  10. iOS性能之其他

    本篇文章是个引用,因为这些技术我都只是研究过,但是并没有在项目中使用,也没有深入研究,所以只能当做一个笔记了 网络请求 现在大多数的网络请求都是使用的json格式(相信没有APP再使用XML格式了吧) ...