第一种:

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. C博客作业05--指针

    1. 本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 这几周学习了指针,指针是C语言的一个重要的概念,也是特色之一.它可以通过对地址的访问来改变值,所以它的 ...

  2. CCF CSP 201512-1 数位之和

    题目链接:http://118.190.20.162/view.page?gpid=T37 问题描述 试题编号: 201512-1 试题名称: 数位之和 时间限制: 1.0s 内存限制: 256.0M ...

  3. Object.prototype的成员介绍

    3.Object.prototype的成员介绍        Object.prototype是js中所有的对象的祖宗        Object.prototype中所有的成员都可以被js中所有的对 ...

  4. Qt QGraphicsItem要点 积累

    1.在创建QGraphicsItem子类的时候,想要实现自己绘图,一般是重新实现boundingRect()和paint()函数,如果不重新实现shape(),基类的实现将会退而使用 bounding ...

  5. 58 字体反爬攻略 python3

    1.下载安装包 pip install fontTools 2.下载查看工具FontCreator 百度后一路傻瓜式安装即可 3.反爬虫机制 网页上看见的 后台源代码里面的 从上面可以看出,生这个字变 ...

  6. @Autowired注入报错

    在用  @Autowired  注入多个类时,出现的错误 因为@Autowired 是按照类型注入,当找不到对应类型类时,才会去按照名称去找. 这时添加注解@Qualifier(“service”), ...

  7. windos下安装pgAdmin

    1.进入pgAdmin官方网址 https://www.pgadmin.org/download/ 2.下载安装包 版本下载地址:https://www.pgadmin.org/download/pg ...

  8. 关于bootstrap框架美化的实例教程(python)

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...

  9. iOS has conflicting provisioning settings 解法

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  10. Zynq启动流程

    前言 Zynq启动流程和ARM处理器类似,PS部分是启动和配置过程的主设备,芯片引导必须由处理器驱动,系统上电复位后会读取设备模式引脚来决定从什么设备启动芯片.如下表Boot Devices条目所示, ...