通过单击目标来循环渐变方向

问题描述

我需要通过点击一个目标来循环所有八个梯度方向，如下所示:

I need to loop all of the eight gradient directions by clicking on a target, like this:

$('.targ').on('click', function() {
  let a = $(this).css('background').split(',')[0];
  console.log(a); // I need `to top` here
  if (a == 'to top') {
    a = 'to top right'
  } else if (a == 'to top right') {
    a = 'to right'
  } else if (a == 'to right') {
    a = 'to right bottom'
  }
  // and so on
  $(this).css('background', 'linear-gradient' + new_value);
});

.targ {
  width: 54px;
  height: 54px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='targ' style='background: linear-gradient(to top,red,yellow)'></div>

有帮助吗?

推荐答案

您可以使用background-image访问linear-gradient值.

$('.targ').on('click', function() {
  let direction = $(this).css('background-image').split(',')[0].slice(16);
  const gradientColors = $(this).css('background-image').split(',').slice(1);

  if (direction == 'to top') {
    direction = 'to top right'
  } else if (direction == 'to top right') {
    direction = 'to right'
  } else if (direction == 'to right') {
    direction = 'to right bottom'
  }

  $(this).css('background', 'linear-gradient(' + direction + ',' + gradientColors.join(','));
});

.targ {
  width: 54px;
  height: 54px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='targ' style='background: linear-gradient(to right,red,yellow)'></div>

这篇关于通过单击目标来循环渐变方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！