CreateTime--2017年7月24日10:15:47
Author:Marydon

js获取高度和宽度

参考连接:http://www.cnblogs.com/EasonJim/p/6229517.html

实现方式:

    style.height----offsetHeight,style.width----offsetWidth

第一种情况:

  宽高都写在样式表里,就比如 #div1{width:120px;height:100px;}。

  获取id=‘div1’的宽和高,如何实现?

  通过document.getElementById('div1').style.height/width,返回值为空,即获取不到宽和高;

  必须通过document.getElementById('div1').offsetHeight/offsetWidth  

第二种情况:

  宽和高写在行内,如style="width:120px;height:100px;"

  上述2个方法都能获取到宽度和高度

两者的区别:

  a.通过style.attr的方式取值有限制条件:即要获取的属性必须在行内样式中声明;而id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,都能获取到元素的宽和高;

  b.offsetWidth/offsetHeight=容器宽度+两侧边框宽度,返回值是数值;而style.attr返回的就是div的宽度,返回值是数值+"px"。

 

js获取高度和宽度的更多相关文章

  1. document.body / document.ducumentElement /等获取高度和宽度的区别

    document.body / document.ducumentElement /等获取高度和宽度的区别 <!DOCTYPE html> <html> <head la ...

  2. js中高度与宽度的获取

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  3. js 获取浏览器/网页宽度高度整理

    网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...

  4. js获取手机屏幕宽度、高度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  5. JS 获取屏幕的宽度和高度,各种方式

      Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document ...

  6. JS获取浏览器高宽度,屏幕分辨率和一些定位空隙等

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  7. document.body / document.ducumentElement /等获取高度和宽度的区别 ----转载

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. js 获取高度

    网页可见区域宽 :document.body.clientWidth; 网页可见区域高:document.body.clientHeight;   网页可见区域高:document.body.offs ...

  9. js获取滚动条的宽度

    function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oD ...

随机推荐

  1. nodes.js详细安装

    nodes.js详细安装 Node.js 本章节我们将向大家介绍在window和Linux上安装Node.js的方法. 本安装教程以Node.js v4.4.3 LTS(长期支持版本)版本为例. No ...

  2. 什么是Web和www

    什么是Web和www 通过之前课程的学习,我们已经对计算机网络有了一些了解,这里我主要想说一个点,也是计算机网络中一个很容易被误解的概念,就是什么是Web,它和HTTP.HTML.Internet.i ...

  3. Hadoop 3相对于hadoop 2的新特性

    相对于之前主要生产发布版本Hadoop 2,Apache Hadoop 3整合许多重要的增强功能. Hadoop 3是一个可用版本,提供了稳定性和高质量的API,可以用于实际的产品开发.下面简要介绍一 ...

  4. 4.Linux用户与权限管理

    Linux 系统是一个多用于多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统 新增用户: useradd  新用户名 设置密码:pa ...

  5. Windows 下的快捷键

    电脑快捷键小技巧window健 + r   →  msconfig       查看电脑的开机启动项window健 + r   →  notepad        无标题的记事本window健 + r ...

  6. php--常见算法3

    <?php function leijia($number){ $arr=[]; for($i=1;$i<=$number;$i++) { for($j=1;$j<=$number; ...

  7. SpringBoot-核心依赖说明

    spring-boot-dependencies 一般用来放在父项目中,来声明依赖,子项目引入相关依赖而不需要指定版本号,好处就是解决依赖冲突,统一管理依赖版本号 利用pom的继承,一处声明,处处使用 ...

  8. NETGEAR 系列路由器命令执行漏洞简析

    NETGEAR 系列路由器命令执行漏洞简析 2016年12月7日,国外网站exploit-db上爆出一个关于NETGEAR R7000路由器的命令注入漏洞.一时间,各路人马开始忙碌起来.厂商忙于声明和 ...

  9. “美登杯”上海市高校大学生程序设计 C. 小花梨判连通 (并查集+map)

    Problem C C . 小 花梨 判连通 时间限制:2000ms 空间限制:512MB Description 小花梨给出

  10. input和textarea的区别

    区别: <textarea>标签是成对的,有结束标签进行闭合,标签的内容写在标签对中间:<input>是单个标签,标签的内容通过 value 属性设置: <textare ...