在前端开发中，我们通常会使用CSS来样式化HTML元素。但是，有时候我们需要通过JavaScript获取某个元素的CSS样式，这时就需要了解如何使用JavaScript读取CSS规则值。
获取CSS样式的方法
1. 使用style属性
每个HTML元素都有一个style属性，它是一个对象，包含了元素的行内样式（即写在style属性中的样式）。我们可以使用该属性来读取元素的行内样式。
var element = document.getElementById("example");
var color = element.style.color; // 获取颜色值但是，该方法只能获取行内样式，无法获取外部样式表或内部样式表中定义的样式。
2. 使用window.getComputedStyle方法
要获取外部样式表或内部样式表中定义的样式，我们可以使用window.getComputedStyle()方法。该方法返回一个包含所有计算出的CSS属性和值的对象，注意这里的属性名是驼峰式的。
var element = document.getElementById("example");
var style = window.getComputedStyle(element);
var color = style.getPropertyValue("color"); // 获取颜色值请注意，在使用getPropertyValue()方法时，必须传递正确的CSS属性名称。例如，font-size应该写成fontSize。
3. 使用element.currentStyle属性（仅适用于IE浏览器）
如果您正在编写针对Internet Explorer浏览器的代码，可以使用element.currentStyle属性来获取计算样式。它与style属性类似，但返回的是计算后的样式。
var element = document.getElementById("example");
var color = element.currentStyle.color; // 获取颜色值示例代码
下面是一个完整的示例代码，演示如何使用JavaScript读取元素的CSS规则值：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
-------
-------- -
------ ----
---------- -----
-
--------
-------
------
-- ---------------------
--------
--- ------- - -----------------------------------
-- ----------------------
--- ----------- - --------------------
---------------------- - -------------
-- ----------------------------------
--- ------------- - ---------------------------------
--- ------------- - ----------------------------------------
----------------------- - ---------------
-- ----------------------------------------
--- ------- - ---------------------------
--------------------------- - ---------
---------
-------
-------这个示例演示了如何使用三种方法获取相同的CSS颜色值。请注意，行内样式只能通过第一种方法获取，而其余两种方法可以读取外部样式表或内部样式表中定义的样式。
总结
在前端开发中，使用JavaScript读取CSS规则值是一个非常有用的技能。我们可以使用style属性、window.getComputedStyle()方法或者element.currentStyle属性（仅限于IE浏览器）来实现。但是，请注意，getPropertyValue()方法需要正确的CSS属性名称，且该属性名必须采用驼峰式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11126
