如何使用 JavaScript 以十六进制代码形式获取 Web 元素的背景颜色？

获取元素背景的十六进制颜色代码

使用网页元素时，以十六进制格式检索背景颜色代码的能力对于各种样式非常有用和设计目的。这个问题深入研究了用户需要利用 JavaScript 和 CSS 获取元素的背景颜色代码。

代码实现

要获取背景颜色代码，可以使用 JavaScript 的 css() 函数。例如，如果您想检索

的背景颜色代码；类名为“div”的元素，可以使用以下代码片段：

console.log($(".div").css("background-color"));

此代码使用 jQuery 库访问元素，然后使用 css() 函数检索值对于“背景颜色”属性。生成的十六进制格式的背景颜色代码将记录到控制台。

用于十六进制转换的自定义函数

或者，可以定义自定义 JavaScript 函数来转换从 css 检索到的颜色值() 函数转换为十六进制格式。下面是一个示例：

var color = '';
$('div').click(function() {
  var x = $(this).css('backgroundColor');
  hexc(x);
  console.log(color);
})

function hexc(colorval) {
  var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  delete(parts[0]);
  for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
  }
  color = '#' + parts.join('');
}

在此示例中，hexc() 函数将 RGB 颜色值作为输入并将其转换为十六进制格式。当

出现时调用该函数。单击元素。生成的十六进制颜色代码存储在颜色变量中并记录到控制台。

其他资源

有关实际演示，请参阅原始问题中提供的代码示例链接。单击 div 元素以十六进制格式检索其背景颜色值。

以上是如何使用 JavaScript 以十六进制代码形式获取 Web 元素的背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！