jQuery获取样式中的背景颜色属性值/颜色值

获取样式中的背景颜色属性值/颜色值有以下几种方法：

方法一：使用css()方法获取background-color属性值

使用jQuery提供的css()方法，我们可以获取元素的background-color属性值，进而获取背景颜色值。

以下是示例代码：

// 获取id为box的元素的背景颜色值
var bgColor = $('#box').css('background-color');
console.log(bgColor);

注意：这里获取到的bgColor变量值是一个常规的CSS颜色值字符串，比如"rgb(255, 0, 0)"，“#FF0000”等。

方法二：使用正则表达式获取RGB颜色值

如果我们只需要获取背景颜色的RGB值而不需要获取到CSS颜色字符串，那么可以使用正则表达式匹配出background-color属性值中的RGB颜色值。

以下是示例代码：

// 获取id为box的元素的背景颜色RGB值
var bgColor = $('#box').css('background-color');
var rgb = bgColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (rgb) {
  console.log(rgb[1], rgb[2], rgb[3]);
}

注意：这里获取到的rgb数组中，第一个元素是红色值、第二个元素是绿色值、第三个元素是蓝色值。它们的值都是0-255之间的整数。

示例代码

下面是两个获取背景颜色的示例，一个使用css()方法，另一个使用正则表达式匹配RGB值。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例代码</title>
  <style>
    #box1 {
      background-color: #FF0000;
    }
    #box2 {
      background-color: rgba(0, 128, 0, 0.5);
    }
  </style>
  <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script>
    $(function() {
      // 使用css()方法获取背景颜色
      var bgColor1 = $('#box1').css('background-color');
      console.log(bgColor1);  // 输出：rgb(255, 0, 0)

      // 使用正则表达式获取背景颜色RGB值
      var bgColor2 = $('#box2').css('background-color');
      var rgb = bgColor2.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
      if (rgb) {
        console.log(rgb[1], rgb[2], rgb[3]);  // 输出：0, 128, 0
      }
    });
  </script>
</head>
<body>
  <div id="box1">红色<div>
  <div id="box2">半透明绿色<div>
</body>
</html>

运行代码后，开发者工具控制台会分别输出：

rgb(255, 0, 0)
0 128 0

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery获取样式中的背景颜色属性值/颜色值 - Python技术站

jQuery获取样式中的背景颜色属性值/颜色值

方法一：使用css()方法获取background-color属性值

方法二：使用正则表达式获取RGB颜色值

示例代码

相关文章