文章/答案/技术大牛

发布

社区首页 >问答首页 >如何检查背景是渐变还是纯色？

问如何检查背景是渐变还是纯色？
EN

Stack Overflow用户

提问于 2020-03-11 13:54:20

回答 1查看 272关注 0票数 0

需要检查单击元素的背景是渐变还是实色。

$('.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>

javascript

jquery

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-11 14:04:13

试试这个：

$(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")读取css背景属性--如果包含字符串“渐变”，则为渐变，如果不是，则不是渐变。

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

(可能对你一点也不重要)

是的，如下所述，regex /gradient/在某些情况下可能会产生假阳性(例如，包含单词“梯度”的文件名)。那么，只需为您的确切场景提供更复杂的正则表达式即可。然而，总的概念仍然是一样的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60637703

复制

相似问题

问如何检查背景是渐变还是纯色？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检查背景是渐变还是纯色？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检查背景是渐变还是纯色？
EN