第一种:

dom.style.width/height

这种方法只能获取使用内联样式的元素的宽和高。

第二种:

dom.currentStyle.width/height

这种方法获取的是浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。

第三种:

window.getComputedStyle(dom).width/height

这种方法获取的也是浏览器渲染以后的元素的宽和高,但这种写法兼容性更好一些。

第四种:

dom.getBoundingClientRect().width/height

这种方法经常使用的场所是,计算一个元素的绝对位置(相对于视窗左上角),它能拿到元素的left、top、width、height 4个属性。

使用js如何设置、获取盒模型的宽和高的更多相关文章

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

    JS设置和获取盒模型的宽和高 dom.style.width/height:只能取出内联样式的宽度和高度 dom.currentStyle.width/height:获取即时的计算的样式,但是只有IE ...

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

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

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

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

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

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

  5. 获取jsp页面的宽和高

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

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

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

  7. js封装设置获取cookie

    var docCookies = { getItem: function (sKey) { return decodeURIComponent(document.cookie.replace(new ...

  8. ImageMagick:获取一行文字的宽与高

    double *fm = MagickQueryFontMetrics(mw_temp, dw_wand, text_utf8); //获取文字在指定字体和字号下的宽度和高度 double textW ...

  9. 深入理解CSS盒模型

    如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起.这种看似简单的题其实是最不好答的. 下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种 ...

随机推荐

  1. Python 上下文管理协议中的__enter__和__exit__基本理解

    所谓上下文管理协议,就是咱们打开文件时常用的一种方法:with __enter__(self):当with开始运行的时候触发此方法的运行 __exit__(self, exc_type, exc_va ...

  2. css3 样式过度器 Transition

    transition   简写属性,用于在一个属性中设置四个过渡属性. 1. transition 把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: eg: div{wi ...

  3. How to using Piwis Tester II code Porsche rear end electronics

    V18.100 Piwis Tester II Diagnostic Tool For Porsche With CF30 Laptop High Quality Top 7 Reasons to G ...

  4. nodejs笔记之路由及util和url模块

    路由是URL到函数的映射:对于最简单的静态资源服务器,可以认为,所有URL的映射函数就是一个文件读取操作.对于动态资源,映射函数可能是一个数据库读取操作,也可能是进行一些数据的处理,等等. 如: /u ...

  5. HTTP首部概览

    HTTP首部概览: . Accept:告诉WEB服务器自己接受什么介质类型,*/* 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type. 2. Accept-Charse ...

  6. SQL表的自身关联

    SQL表的自身关联 有如下两个数据表: tprt表,组合基本信息表,每个组合有对应的投管人和托管人: tmanager表,管理人信息表,管理人类别由o_type区分: 具体表信息如下所示: tprt表 ...

  7. C#线程同步(1)- 临界区&Lock

    文章原始出处 http://xxinside.blogbus.com/logs/46441956.html 预备知识:线程的相关概念和知识,有多线程编码的初步经验. 一个机会,索性把线程同步的问题在C ...

  8. Java基础学习-关键字的概述和特点以及常量的概述和分类

    1.关键字概述     -被Java语言赋予特定含义的单词 2.关键字的特点     -组成关键字的字母全部小写     -常用的代码编辑器,针对关键字有特殊的颜色标记,非常直观,所以我们不需要死记硬 ...

  9. 自动化pip安装

    其实正确安装python3.6后,在安装目录里就有pip.exe文件,只不过用的时候,要进入pip的安装目录下进行安装numpy等. 如进入这个目录, D:\Program Files\Python\ ...

  10. VUE之图表操作

    参考 v-charts文档有详细说明,不多做介绍. 感谢博主的梳理,我在此基础之上稍作修改 效果展示: 在工作中遇到了就记录下来,留作备用,以便今后查阅: 安装 npm install vue-sch ...