在前端开发中，我们经常需要获取某个元素的样式属性。如果该元素直接使用了样式属性，我们可以直接通过 JavaScript 中的 style 属性或 jQuery 的 css() 方法来获取它们。但是，当元素使用了 CSS 类时，获取其样式属性就需要一些特殊的技巧。本文将介绍如何通过 JavaScript/jQuery 获取 CSS 类的样式属性，并提供详细的示例代码。
通过 JavaScript 获取 CSS 类的样式属性
在 JavaScript 中，获取元素的样式属性有两种方式：使用 style 属性和使用 getComputedStyle() 方法。然而，这两种方式都不能直接获取 CSS 类的样式属性。幸运的是，我们可以使用 getComputedStyle() 方法结合 getPropertyValue() 方法来获取 CSS 类的样式属性。
以下是一个示例代码：
<!-- HTML --> <div id="example" class="box"></div>
// JavaScript
const example = document.querySelector('#example');
const styles = window.getComputedStyle(example);
const margin = styles.getPropertyValue('margin');
console.log(margin); // "10px"在上面的示例代码中，我们首先使用 querySelector() 方法获取了 id 为 example 的元素，然后使用 getComputedStyle() 方法获取了该元素的计算样式对象。最后，我们使用 getPropertyValue() 方法获取了该元素的 margin 样式属性。
需要注意的是，由于 getComputedStyle() 返回的是计算样式对象，因此它会返回元素的实际样式值，而不是在 CSS 中定义的样式值。如果需要获取在 CSS 中定义的样式值，可以使用 style 属性或在 JavaScript 中创建一个虚拟元素（例如使用 createElement() 方法）来获取。
通过 jQuery 获取 CSS 类的样式属性
在 jQuery 中，获取元素的样式属性非常简单，只需使用 css() 方法即可。与 JavaScript 不同的是，jQuery 的 css() 方法可以直接获取 CSS 类的样式属性。
以下是一个示例代码：
<!-- HTML --> <div id="example" class="box"></div>
// jQuery
const $example = $('#example');
const margin = $example.css('margin');
console.log(margin); // "10px"在上面的示例代码中，我们首先使用 $() 函数获取了 id 为 example 的元素，并将其保存在 $example 变量中。然后，我们使用 $example.css('margin') 方法获取了该元素的 margin 样式属性。
需要注意的是，在 jQuery 中，css() 方法还可以用于设置元素的样式属性。例如，可以使用 $example.css('background-color', 'red') 将元素的背景色设置为红色。
总结
本文介绍了如何通过 JavaScript/jQuery 获取 CSS 类的样式属性。对于 JavaScript，我们可以使用 getComputedStyle() 方法结合 getPropertyValue() 方法来获取计算样式对象中的样式属性。对于 jQuery，则可以直接使用 css() 方法获取 CSS 类的样式属性。希望本文能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31591
