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. Entity Framework Core生成的存储过程在MySQL中需要进行处理及PMC中的常用命令

    在使用Entity Framework Core生成MySQL数据库脚本,对于生成的存储过程,在执行的过程中出现错误,需要在存储过程前面添加 delimiter // 附:可以使用Visual Stu ...

  2. Docker service endpoint with name xxx already exist问题

    这是因为利用docker compose启的容器再用docker rm命令删除后,网络仍然被占用,需要手动清理 解决办法: 先用docker rm -f xxx删除容器 再输入docker netwo ...

  3. 猿说python

    一.简介         知识改变命运,程序改变世界.互联网时代潜移默化的改变着我们的生活,伴随技术的进步,我想下一个时代应该属于人工智能和机器学习,属于python.           pytho ...

  4. .net core 3.0 Signalr - 02 使用强类型的Hub

    ## 强类型的优缺点 - 优点 强类型的Hub可以避免魔法函数名,相比弱类型更容易维护和发现问题,直接上代码 - 缺点 特么的得多些好几行代码 ## 代码 ### 接口定义 ``` C# /// // ...

  5. EF Core 实现读写分离的最佳方案

    前言 公司之前使用Ado.net和Dapper进行数据访问层的操作, 进行读写分离也比较简单, 只要使用对应的数据库连接字符串即可. 而最近要迁移到新系统中,新系统使用.net core和EF Cor ...

  6. 代理（Proxy）设计模式

    目录 概述 静态代理 UML类图 代码实现 代码地址 静态代理的不足 动态代理之jdk实现 UML类图 代码实现 利用JDK实现动态代理的优点 利用JDK实现动态代理的不足 代码地址 动态代理之cgl ...

  7. JAVA MyBatis配置文件用properties引入外部配置文件

    方式一:通过properties 元素的子元素来传递数据 例如: <properties> <property name="driver" value=" ...

  8. [ASP.NET Core 3框架揭秘] 跨平台开发体验: Docker

    对于一个 .NET Core开发人员,你可能没有使用过Docker,但是你不可能没有听说过Docker.Docker是Github上最受欢迎的开源项目之一,它号称要成为所有云应用的基石,并把互联网升级 ...

  9. Rust入坑指南：坑主驾到

    欢迎大家和我一起入坑Rust,以后我就是坑主,我主要负责在前面挖坑,各位可以在上面看,有手痒的也可以和我一起挖.这个坑到底有多深?我也不知道,我是抱着有多深就挖多深的心态来的,下面我先跳了,各位请随意 ...

  10. Spring Boot （十三）： Spring Boot 整合 RabbitMQ

    1. 前言 RabbitMQ 是一个消息队列,说到消息队列,大家可能多多少少有听过,它主要的功能是用来实现应用服务的异步与解耦,同时也能起到削峰填谷.消息分发的作用. 消息队列在比较主要的一个作用是用 ...