一、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. 轻松理解JavaScript闭包

    摘要 闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包 一.什么是闭包? 闭包就是可以访问另一个函数作用域中变量的函数. 下面列举出常见的闭包实现方式,以例子讲解闭包概念 ...

  2. 摆脱printf的噩梦

    众所周知,printf是一个方便.直观.易写.变长参数的打印函数,但它有一个致命的缺陷,如下的语句将导致程序出现严重的运行时错误: printf("%s", 1); 然后程序中断, ...

  3. React 入门之路(1)

    React React简介 是由Facebook公司推广的一套框架,已经应用instagram等产品 React就是为了提供应用程序性能而设计的一套框架 在angular中,对dom提供了一些指令,让 ...

  4. [Spark] - SparkCore程序优化总结

    http://spark.apache.org/docs/1.6.1/tuning.html1) 代码优化 a. 对于多次使用的RDD,进行数据持久化操作(eg: cache.persist) b. ...

  5. Videojs视频插件在React中的应用

    1.介绍video.js视频插件 1.1 简单介绍 Video.js是一个通用的在网页上嵌入视频播放器的JS库,支持电脑端和移动端.Video.js自动检测浏览器对Html5的支持情况,如果不支持Ht ...

  6. js闭包深度讲解

    js的闭包是学习js过程中的重点,但是不得不说也是一个难点呀,其涉及到了js中的很多概念.我在学习js中也遇到了很多问题,这篇文章算是一个对闭包的总结,文章主要内容为闭包的基本知识点与对其理解上的一些 ...

  7. 首个写博客的Android任务

    任务1 单击按钮图片选择器 使用TextView,RadioGroup,RadioButton完成. 设置单击按钮选择显示花朵. 首先设置了页面布局 <LinearLayout xmlns:an ...

  8. C++数据

    const :常量 ~x == -++x == -(x+1)   二进制数,1变为0,0变为1 ^                               相同为0,不同为1 &      ...

  9. 模拟一个shuffle

    之所以会想到写这么一个shuffle的例子,是因为一个需求:我需要把一个有序数组中的数据随机的打散.java代码如下, public void shuffle() { int[] arr = {1,2 ...

  10. sql 两种分页offset和row_number简单分析

    新建临时表字段id,向临时表里插入1,2,3,4,5,6 if object_id('tempdb..#test') is not null drop table #test create table ...