JavaScript 获取元素的当前显示的样式

一、 在 IE 浏览器中获取元素的当前显示的样式

语法：元素 . currentStyle . 样式名

它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值

注意：这个方法，只兼容于 IE 浏览器，其他浏览器均不支持，如下图：

• 读取元素样式，返回的值带有单位，例如：px
• 若我们要使用读取元素样式返回的值，需取出其中的数字，即：parseInt()
• 若不设置 width / height 属性，在查询时，会返回 auto
• 若不设置 background-color 属性，在查询时，会返回 transparent

二、在其他浏览器中可以使用 getComputedStyle() 这个方法来获取元素当前的样式

这个方法是 window 的方法，可以直接使用

需要两个参数

1. 要获取样式的元素
2. 可以传递一个伪元素，一般都传 null

该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象 . 样式名来读取样式，但是该方法不支持 IE8 及以下的浏览器

• 读取元素样式，返回的值带有单位，例如：px
• 若我们要使用读取元素样式返回的值，需取出其中的数字，即：parseInt()
• 若不设置 width / height 属性，在查询时，会根据窗口的尺寸，返回相应的值
• 在查询 background-color 属性时，会返回对应的 rgb 值
• 若不设置 background-color 属性，在查询时，会返回 rgba(0, 0, 0, 0)