在带有剪辑路径的 JQuery CSS 中使用变量答案

【问题标题】：Use variable in JQuery CSS with clip-path在带有剪辑路径的 JQuery CSS 中使用变量
【发布时间】：2018-07-26 00:44:20
【问题描述】：

如何在带有剪辑路径的 JQuery CSS 中使用变量。我已经记录了变量的结果，它似乎与工作 css 代码完全相同，正如您在 img1 上看到的那样。有什么想法吗？

$(document).ready(function(){

  //WORKING
  $('.img1').css({"clip-path": "polygon(30% 0%, 100% 23%, 54% 50%, 100% 100%, 70% 100%, 79% 59%, 10% 84%, 52% 49%)"});

  //NOT WORKING
  var random1 = (Math.floor(Math.random() * 100) + 1) + "%",
      random2 = Math.floor(Math.random() * 100) + 1 + "%",
      random3 = Math.floor(Math.random() * 100) + 1 + "%",
      random4 = Math.floor(Math.random() * 100) + 1 + "%",
      random5 = Math.floor(Math.random() * 100) + 1 + "%",
      random6 = Math.floor(Math.random() * 100) + 1 + "%",
      random7 = Math.floor(Math.random() * 100) + 1 + "%",
      random8 = Math.floor(Math.random() * 100) + 1 + "%",
      clippi = '"clip-path": "polygon(' +random1 + ' ' + random2 + ','+ ' ' + random3 + ' ' + random4 + ','+ ' ' + random5 + ' ' + random6 + ','+ ' ' + random7 + ' ' + random8 + ','+ ' ' + random1 + ' ' + random2 + ','+ ' ' + random3 + ' ' + random4 + ','+ ' ' + random5 + ' ' + random6  + ','+ ' ' + random7  + ' ' + random8+')"';

    console.log(clippi)
    $('.img2').css({clippi});


});

img{
  width: 40%;
}

.img1{
  border: 5px solid red;
}

.img2{
  border: 5px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="http://placekitten.com/1200/1600">
<img class="img2" src="http://placekitten.com/900/900">

【问题讨论】：

标签： jquery css clip-path

【解决方案1】：

发生这种情况是因为您将字符串而不是对象传递给 css 函数。我可以通过像这样更改 css 声明来修复您的示例：

$(document).ready(function(){

  //WORKING
  $('.img1').css({"clip-path": "polygon(30% 0%, 100% 23%, 54% 50%, 100% 100%, 70% 100%, 79% 59%, 10% 84%, 52% 49%)"});

  //NOT WORKING
  var random1 = (Math.floor(Math.random() * 100) + 1) + "%",
      random2 = Math.floor(Math.random() * 100) + 1 + "%",
      random3 = Math.floor(Math.random() * 100) + 1 + "%",
      random4 = Math.floor(Math.random() * 100) + 1 + "%",
      random5 = Math.floor(Math.random() * 100) + 1 + "%",
      random6 = Math.floor(Math.random() * 100) + 1 + "%",
      random7 = Math.floor(Math.random() * 100) + 1 + "%",
      random8 = Math.floor(Math.random() * 100) + 1 + "%",
      clippi = random1 + ' ' + random2 + ','+ ' ' + random3 + ' ' + random4 + ','+ ' ' + random5 + ' ' + random6 + ','+ ' ' + random7 + ' ' + random8 + ','+ ' ' + random1 + ' ' + random2 + ','+ ' ' + random3 + ' ' + random4 + ','+ ' ' + random5 + ' ' + random6  + ','+ ' ' + random7  + ' ' + random8;

    console.log(clippi)
    $('.img2').css({"clip-path": 'polygon('+ clippi +')'});


});

img{
  width: 40%;
}

.img1{
  border: 5px solid red;
}

.img2{
  border: 5px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="http://placekitten.com/1200/1600">
<img class="img2" src="http://placekitten.com/900/900">

【讨论】：