changing attribute using jquery

Question

I am trying to change background attribute using jquery. It's something like this

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

If I put a simple color it works fine but with above gradient properties it's not working. Can anyone help.

Your css in invalid, try to apply same css in browser console and you will see browser will tells you is not valid. change -webkit-radial-gradient to radial-gradient and you are good to go — Mehdi Dehghani
– Mehdi Dehghani, Commented Mar 3, 2020 at 6:15

Andy Hoffman · Accepted Answer · 2020-11-05 05:59:58Z

3

I got this working using the { } inside the function call. More importantly, I removed the -webkit- prefix, which was causing the JavaScript call to silently fail. Because radial-gradient is supported in ~~93%~~ 96.72% of browsers, the prefix can be ignored.

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

edited Nov 5, 2020 at 5:59

answered Mar 3, 2020 at 6:12

Andy Hoffman

19.2k5 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin · Accepted Answer · 2020-03-03 06:23:35Z

2

Maybe your gradient code is wrong or not formatted. I have added the fiddle, hope it helps.

N.B: Refer to ColorZilla. Easiest way to get codes for gradient.

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

answered Mar 3, 2020 at 6:23

Kevin

1,3771 gold badge9 silver badges21 bronze badges

Comments

Abdelrahman Gobarah · Accepted Answer · 2020-03-03 06:28:43Z

use radial-gradient instead of -webkit-radial-gradient

and better if you use toggleClass instead of put static values into your code,

Solution for your question

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

Better Solution

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>

Collectives™ on Stack Overflow

changing attribute using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related