第一种:

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. SQL注入检测方法

    private bool CheckParams(params object[] args){ string[] Lawlesses={"=","'"}; if ...

  2. sql server中的开窗函数over、视图、事物

    一.开窗函数over的作用有两个: 1.排序order by,row_number,翻页 2.划区partition by,结合聚合函数针对某部分数据进行汇总 翻页的sql server 语句: an ...

  3. redis 字符串(string)函数

    字符串(string)函数 get 命令/方法/函数 Description Get the value related to the specified key 取得与指定的键值相关联的值 Para ...

  4. httpd 处理模型

    prefork 一个请求用一个进程响应 worker 一个请求用一个线程响应(启动多个进程,多个进程生成多个线程) event 一个进程,处理多个请求

  5. 基于PLC1850平台的ARP包请求与响应

    一.以太网ARP报文格式 ①.以太网目的地址:占6个字节(接收方的MAC地址,不清楚时发广播地址:FF-FF-FF-FF-FF-FF) ②.以太网源地址:占6个字节(发送方的MAC地址) ③.帧类型: ...

  6. Oracle生成GUID

    ,),),),),) GUID FROM ( SELECT SYS_GUID() GUID FROM DUAL )

  7. centos7多网卡配置bond0 (mode6无需交换机做配置)

    1.执行setup命令-->网络配置-->本例中四块网卡. 2.ifconfig列出四块网卡. 3.我们的目标,绑定eth0和eth1两块网卡作为公网网卡,ip设置为192.168.0.5 ...

  8. zabbix3.4实现sendEmail邮件报警

    一.安装软件 wget http://caspian.dotconf.net/menu/Software/SendEmail/sendEmail-v1.56.tar.gz 创建目录 mkdir /us ...

  9. SQL 聚集函数(聚组函数)的使用 注意事项

    原文地址 http://hi.baidu.com/sdunus/blog/item/333c1a29305041fe99250aad.html 在介绍GROUP BY 和 HAVING 子句前,我们必 ...

  10. php 加密解密算法 用于数据传输

    /** * 加密方法 * @param string $data 要加密的字符串 * @param string $key 加密密钥 * @param int $expire 过期时间 (单位:秒) ...