第一种:

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. maven 控制台 打包

    maven打包方法1.打开cmd,进入到项目的根目录2.执行命令:mvn clean package等待结束.结束后到目录的target子目录中找jar文件即可

  2. 软件综合实践Axure介绍

    首先就是下载安装Axure这款软件了,在百度上搜索“”Axure rp下载“”即可,下载完成后,打开exe安装,根据步骤一步步点击下一步即可完成安装. 运行该软件时会出现类似于填写激活码的东西,这时依 ...

  3. 【视频合集】极客时间 react实战进阶45讲 【更新中】

    https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...

  4. linux文件查找-find和locate

    一.find 使用语法:find  [查找目录]  [查找规则]  [查找完后执行的action] find是根据具体目录进行搜索 1.查找目录 如果不指定查找目录,默认在当前目录下进行查找 如果需要 ...

  5. MyTests

    目录 About Tests Selenium自动化测试 Pyppeteer Explain About Tests 扯淡!测试之瞎扯淡 Selenium自动化测试 什么是Selenium? Sele ...

  6. Codeforces 1027F Session in BSU - 并查集

    题目传送门 传送门I 传送门II 传送门III 题目大意 有$n​$门科目有考试,第$i​$门科目有两场考试,时间分别在$a_i, b_i\ \ (a_i < b_i)​$,要求每门科目至少参加 ...

  7. Ember.js 看法,精辟

    https://ruby-china.org/topics/31451#reply43 都是大牛,或许还是vue适合小白!架不住人多啊!一个非常优秀的产品,客户百十号人,如何发展! 46楼的感想如下, ...

  8. java中的构造器

    构造器是什么 1.构造器,也称构造方法.构造函数.作用是构造出来一个类的实例,确保对象得到初始化. 2.构造器的格式: 权限修饰符 类名(无参/有参){}. 3.根据有无参数,可分为无参构造 和有参构 ...

  9. C# DataGridView 动态添加列和调整列顺序

    https://yq.aliyun.com/articles/421700 // DataGridView1的ColumnDisplayIndexChanged事件处理方法private void D ...

  10. easyUI使用datagrid-detailview.js实现多级级列表嵌套

    转载请注明出处: 注意事项: 原本在谷歌浏览器进行示例测试的,url请求对应的json文件,效果一直显示不出来,换到谷歌和IE是可以正常显示的, 解决方法可参考:http://www.cnblogs. ...