博客

如何使用jQuery获得与一个元素相关的所有CSS样式

  • Post category:jquery

使用 jQuery 可以获取一个元素相关的所有 CSS 样式，可以通过 .css() 方法或 .getComputedStyle() 方法来实现。

1.使用 .css() 方法

.css() 方法可以获取或设置匹配元素的一个或多个样式属性值。

步骤：
  1. 选取需要获取样式的元素，例如：

“`html

Hello World!

“`

  1. 使用 .css() 方法获取此元素的所有 CSS 样式：

javascript
var cssObj = $("#example").css();

此时，cssObj 变量将包含元素 #example 相关的所有 CSS 样式。

示例：
<div id="example" style="color:red;background-color:yellow">Hello World!</div>
<button id="btn">点击获取元素样式</button>
<script>
    $("#btn").click(function(){
        var cssObj = $("#example").css();
        console.log(cssObj);
    });
</script>
输出：
{
  "color": "rgb(255, 0, 0)",
  "background-color":"rgb(255,255,0)"
}

2.使用 .getComputedStyle() 方法

.getComputedStyle() 方法用于获取计算后的样式，包括通用的样式和显示的样式。

步骤：
  1. 选取需要获取样式的元素，例如：

“`html

Hello World!

“`

  1. 使用 .getComputedStyle() 方法获取此元素的所有 CSS 样式：

javascript
var cssObj = window.getComputedStyle($("#example").get(0));

该方法需要传入一个 DOM 元素，使用 $().get(0) 可以把 jQuery 对象转换为 DOM 元素。

示例：
<div id="example" style="color:red;background-color:yellow">Hello World!</div>
<button id="btn">点击获取元素样式</button>
<script>
    $("#btn").click(function(){
        var cssObj = window.getComputedStyle($("#example").get(0));
        console.log(cssObj);
    });
</script>
输出：
{
  "0":"color",
  "1":"rgb(255, 0, 0)",
  "2":"background-color",
  "3":"rgb(255, 255, 0)",
  ...
}

需要注意的是，.getComputedStyle() 返回的是一个 CSSStyleDeclaration 对象，其中包含了该元素应用的所有样式，可以通过该对象获取样式的值或名称。

以上两种方法都可以获取一个元素相关的所有 CSS 样式，具体使用哪种方法可以根据实际情况进行选择。

Tags: