JS设置和获取盒模型的宽和高

dom.style.width/height：只能取出内联样式的宽度和高度

dom.currentStyle.width/height：获取即时的计算的样式，但是只有IE支持

window.getComputedStyle(dom).width：获取即时计算的样式，支持其他浏览器，兼容性更好

dom.getBoundingClientRect( ).width/height：计算盒模型在页面中的绝对位置，比较少用。

dom.offsetWidth/offectHeight：返回元素实际大小

一、dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或是外部的CSS样式表中的话，通过这种方法是没办法获取dom的宽高的。

实例：

在这个例子中给box1使用<style>设置样式，给box2使用内联样式设置宽高。

所以在使用   console.log(document.getElementById(" ").style.width/height)  只能返回box2的宽度和高度。

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>获取盒子宽高</title>

    <style>

    #box1{

        color: white;

        font-size:50px;

        text-align: center;

        line-height:185px;

        width:300px;height:185px;

        background: plum;

        margin:99px auto;

    }

    </style>

</head>

<body>

    <div id="box1">盒子一</div>

    <div id="box2" style="width:300px;

        height:185px;

        background:pink;

        color: white;

        font-size:50px;

        text-align: center;

        line-height:185px;

        margin: auto;">盒子二</div>

</body>

</html>

控制台输出效果：

只可以获取box2的宽高width：300px；height：185px；

二、dom.currentStyle.width/height

这种方式获取的是在页面渲染完成后的结果，意味着无论以哪种方式，内联也好，style标签中也好，都可以获取的到。但是这种方法只能在IE浏览器中使用。

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>获取盒子宽高</title>

    <style>

    #box1{

        color: white;

        font-size:50px;

        text-align: center;

        line-height:185px;

        width:300px;height:185px;

        background: plum;

        margin:99px auto;

    }

    </style>

</head>

<body>

    <div id="box1">盒子一</div>

    <div id="box2" style="width:300px;

        height:185px;

        background:pink;

        color: white;

        font-size:50px;

        text-align: center;

        line-height:185px;

        margin: auto;">盒子二</div>

</body>

</html>

 IE控制台输出：

三、window.getComputedStyle(dom).width/height

    这种方式的原理和方式二是一样的，都可以在任何方式在获取页面在完成渲染之后的结果。相比dom.currentStyle.width/height方式而言，这种方式可以兼容更多的浏览器，不仅仅是IE浏览器。

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>获取盒子宽高</title>

    <style>

    #box1{

        color: white;

        font-size:50px;

        text-align: center;

        line-height:185px;

        width:300px;height:185px;

        background: plum;

        margin:99px auto;

    }

    </style>

</head>

<body>

    <div id="box1">盒子一</div>

    <div id="box2" style="width:300px;

        height:185px;

        background:pink;

        color: white;

        font-size:50px;

        text-align: center;

        line-height:185px;

        margin: auto;">盒子二</div>

</body>

</html>

firefox浏览器中的效果：

Chrome浏览器中的效果：

IE七八不支持：

四、dom.getBoundingClientRect( ).width/height

   这个方法可以获得运行后的属性。一般用于计算一个元素的绝对定位。返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

  • console.log(box.getBoundingClientRect().top);       // 元素上边距离页面上边的距离

  • console.log(box.getBoundingClientRect().right);     // 元素右边距离页面左边的距离

  • console.log(box.getBoundingClientRect().bottom);  // 元素下边距离页面上边的距离

  • console.log(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离

  • console.log(box.getBoundingClientRect().width);    //元素本身宽度加上边框之后的全部宽度

  • console.log(box.getBoundingClientRect().height);   //元素本身高度加上边框之后的宽度

#box1{

    	color: white;

    	font-size:50px;

    	text-align: center;

    	line-height:185px;

        width:300px;height:185px;

        background: plum;

        margin:99px auto;

    }

　　

五、dom.offsetWidth/offectHeight

这组方法可以  返回元素实际大小，包含边框，内边距和滚动条。返回元素大小，默认单位是px。如果没有设置任何CSS宽度和高度，也会在计算后得到宽度和高度。理解offsetWidth和offsetHeight设置的元素实际大小：

  • 设置边框，输出值等于原本大小+边框大小；
  • 设置内边距，输出值等于原本大小+内边距大小；
  • 设置外边距 / 滚动条，输出值无变化等于原本大小；

对于元素大小的获取，一般是块级(block)元素并且以设置了CSS大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦，所以，建议使用的时候注意。

#box1{

        color: white;

        font-size:50px;

        text-align: center;

        line-height:185px;

        width:300px;height:185px;

        background: plum;

        margin:99px auto;

    }

控制台输出：

---恢复内容结束---

JS设置和获取盒模型的宽和高的更多相关文章

  1. 使用js如何设置、获取盒模型的宽和高

    第一种: dom.style.width/height 这种方法只能获取使用内联样式的元素的宽和高. 第二种: dom.currentStyle.width/height 这种方法获取的是浏览器渲染以 ...

  2. JS如何设置和获取盒模型对应的宽和高

    ㈠方式一:通过DOM节点的 style 样式获取  dom.style.width/height  只能获取使用内联样式的元素的宽和高. <!DOCTYPE html> <html ...

  3. js设置、获取单值cookie和多值cookie

    js设置.获取单值cookie和多值cookie,代码如下: var CookieUtil = (function () { var Cookie = function () { // 获取单值coo ...

  4. 【Android】获取控件的宽和高

    有时候我们须要在Activity的时候获取控件的宽和高来做一些操作,以下介绍三种获取宽和高的方式: 1. onWindowFocusChanged @Override public void onWi ...

  5. JS获取盒模型对应的宽高

    ## 获取内联样式宽高 只能获取内联设置的样式,在style或者.css文件中设置的无法获取 let div = document.querySelect('.test'); let width = ...

  6. js设置与获取Cookie

    /*设置与获取Cookie*/ var Cookie ={} Cookie.write = function(key, value, duration){ var d = new Date(); d. ...

  7. 获取jsp页面的宽和高

    var winWidth; var winHeight; function getResult() { if(window.innerWidth) { winWidth=window.innerWid ...

  8. POI获取单元格的宽和高

    获取单元格的宽,即获取所在列的宽.先获取单元格所在的sheet:cell.getSheet() sheet.getColumnWidth( cell.getColumnIndex() )  单位不是像 ...

  9. js设置、获取、清除cookie

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

随机推荐

  1. 一台机器上搭建多个redis实例的配置文件修改部分

    1.单个redis服务搭建请参考:redis服务搭建 2.一台Redis服务器,分成多个节点,每个节点分配一个端口(6380,6381…),默认端口是6379. 每个节点对应一个Redis配置文件,如 ...

  2. 转 Oracle中关于处理小数点位数的几个函数，取小数位数，Oracle查询函数

    关于处理小数点位数的几个oracle函数() 1. 取四舍五入的几位小数 select round(1.2345, 3) from dual; 结果:1.235 2. 保留两位小数,只舍 select ...

  3. EJB生成代码后遇到transient错误

    启动服务的时候遇到这样的错误: 解决方案: 1.找到对应的模块的SesBean文件 2.去掉transient 3.重启服务即可

  4. Scala XML

    XML 直接在代码中使用 XML 字面量 val doc: Elem = <html><head><title>Test</title></hea ...

  5. 移动端适配 rem 设置

    refresh();    window.onresize = function(){      setTimeout(function(){        refresh();      },10) ...

  6. 并发编程的模型分类（转载于https://link.zhihu.com/?target=http%3A//www.54tianzhisheng.cn/2018/02/28/Java-Memory-Model/）强烈推荐！

    在并发编程需要处理的两个关键问题是:线程之间如何通信 和 线程之间如何同步. 通信 通信 是指线程之间以何种机制来交换信息.在命令式编程中,线程之间的通信机制有两种:共享内存 和 消息传递. 在共享内 ...

  7. Docker4-docker私库的搭建及常用方法-docker-registry方式

    一.简单介绍 前面已经介绍,可以使用Docker Hub公共仓库,但是大多数情况企业都需要创建一个本地仓库供自己使用.这里介绍几种搭建私库的方法 私库的好处有几点 1.节约带宽 2.可以自己定制系统 ...

  8. InfluxDB从原理到实战 - 什么是InfluxDB

    0x00 什么是InfluxDB InfluxDB是一个由InfluxData开发的开源时序型数据库,专注于海量时序数据的高性能读.高性能写.高效存储与实时分析等,在DB-Engines Rankin ...

  9. Flask学习之旅--Flask项目部署

    一.写在前面 Flask 作为一个轻量级的 Web 框架,具有诸多优点,灵活方便,扩展性强,开发文档也很丰富.在开发调试的过程中,我们往往会使用 Flask 自带的 Web 服务器,但如果要投入到生产 ...

  10. docker镜像命令使用

    创建docker容器时使用的docker镜像如果在本地中不存在,docker就会自动从docker镜像仓库中下载,默认的docker镜像仓库是Docker Hub公共镜像源 使用docker sear ...