изменение атрибута с помощью jquery

Question

Я пытаюсь изменить атрибут background , используя jquery. Это что-то вроде этого

$('.insta-icon').css('background' ,'-webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)');

Если я добавлю простой цвет, он будет работать нормально, но с указанными выше градиентными свойствами он не будет работать. Может ли кто-нибудь помочь.

Answer 1

используйте radial-gradient вместо -webkit-radial-gradient

и лучше, если вы используете toggleClass вместо static values в своем коде,

Решение для вашего вопроса

$('.insta-icon').css({
  'background': '-webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)',
    'background': 'radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)'

});

<div class="insta-icon">
  <h1>HELLO WORLD</h1>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

Лучшее решение

function changeBackground() {

  $('.insta-icon').toggleClass('bg-primary bg-secondary');

}

.bg-primary {
  background: black;
  color: white;
}

.bg-secondary {
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)
}

<button onclick="changeBackground();">Change Background</button>

<div class="insta-icon bg-primary">
  <h1>HELLO WORLD</h1>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Я получил это с помощью { } внутри вызова функции. Что еще более важно, я удалил префикс -webkit-, который вызывал тихий сбой вызова JavaScript. Поскольку radial-gradient поддерживается в 93% браузеров , префикс можно игнорировать.

$('.insta-icon').css({
  background: 'radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)'
});

.insta-icon {
  display: inline-block;
  width: 200px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="insta-icon"></div>

jsFiddle

Answer 3

Возможно, ваш код градиента неверен или не отформатирован. Я добавил скрипку, надеюсь, это поможет.

Примечание: см. ColorZilla . Самый простой способ получить коды для градиента.

$( document ).ready(function() {
$('.insta-icon').css({
    background: "-webkit-radial-gradient(center, ellipse cover, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)" 
});
});

.insta-icon{width:200px; height:200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="insta-icon"></div>