时间戳

首页 > 解决方案 > 如何检查背景是渐变色还是纯色

javascript - 如何检查背景是渐变色还是纯色

问题描述

需要检查单击的元素是否具有渐变或纯色作为其背景

$('.title').on('click', function(){
  if($(this).background.isGradient){  // how to say this?
  console.log('gradient');
  }
  else{console.log('solid color');}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='title' style='background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); padding:14px 9px 9px 9px; color:black;'>LOREM</div>
<br>
<div class='title' style='background-color:orange; padding: 9px 5px; color:white;'>IPSUM</div>

标签： javascriptjquerycss

解决方案

尝试这个：

$(document).ready(function() {

  $(".title").each(function() {
    if ($(this).css("background").match(/gradient/)) {
      console.log('gradient');
    } else {
      console.log('solid color')
    }

  })

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='title' style='background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); padding:14px 9px 9px 9px; color:black;'>LOREM</div>
<div class='title' style='background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); padding:14px 9px 9px 9px; color:black;'>LOREM</div>
<div class='title' style='background:#f00; padding:14px 9px 9px 9px; color:black;'>LOREM</div>

说明：您遍历所有具有该类.title的项目并使用$(this).css("background")- 如果它包含字符串“gradient”，它是一个渐变，如果不是，它不是。

然而，这并没有考虑例如从红色到红色的渐变，从技术上讲，这将是一个渐变，但显示为纯色。

（可能对你来说根本不重要）

是的，如下所述，正则表达式/gradient/在某些情况下可能会产生误报（例如，包含单词“梯度”的文件名）。只需为您的确切场景提出一个更复杂的正则表达式。然而，一般概念保持不变。

推荐阅读