Changing CSS via JS

Question

How can i change the "background-image" on .btn-1 to the variable "color" that i have on the script? I basically want to change the 3color gradient property of the CSS .btn-1 using JS.

 <style>
    .btn {
      flex: 1 1 auto;
      margin: 10px;
      padding: 30px;
      text-align: center;
      text-transform: uppercase;
      transition: 0.5s;
      background-size: 200% auto;
      color: white;
     /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
      box-shadow: 0 0 20px #eee;
      border-radius: 10px;
     }

    .btn:hover {
      background-position: right center; 
    }

    .btn-1 {
      background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
    }

    </style>
    <body>
    <div class="container">
    <script>
      var color = {background-image: linear-gradient(to right, color1 0%, color2 51%, color3 100%)}
    </script>
      <a name="button" class="btn btn-1">Button Text</a>
    </div>
    </body>

@DhavalJardosh I think he forgot to talk about event on button click ? — Arthur
– Arthur, Commented Feb 20, 2019 at 0:04

Taki · Accepted Answer · 2019-02-20 00:04:54Z

3

var color needs to be a string, select the element you want using document.querySelector then apply the gradient with element.backgroundImage = color

var color = 'linear - gradient(to right, color1 0 % , color2 51 % , color3 100 % )'

document.querySelector('.btn.btn-1').backgroundImage = color;

.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
}

.btn:hover {
  background-position: right center;
}

.btn-1 {
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

<div class="container">
  <a name="button" class="btn btn-1">Button Text</a>
</div>

answered Feb 20, 2019 at 0:04

Taki

17.7k5 gold badges28 silver badges48 bronze badges

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

5 Comments

GeorgeMMP Over a year ago

Hello @Taki and thank you so much for your answer! I get a problem on my console : Uncaught ReferenceError: Invalid left-hand side in assignment at update ((index):48)

Taki Over a year ago

sorry but i can't tell you why if i can't see the whole code causing the issue, make sure you copied the answer correctly.

GeorgeMMP Over a year ago

codepen.io/anon/pen/gqEejY That's all the code, i only changed the .backgroundImage from your answer to .background-Image because this was the name of the css style of btn-1

Taki Over a year ago

yeah document.querySelector('.btn.btn-1').background-image is indeed invalid, you have to use camel casing to change css in js , if you absolutely want background-image use document.querySelector('.btn.btn-1')['background-image'] = color;

GeorgeMMP Over a year ago

document.querySelector('.btn.btn-1')['background-image'] = color; Doesn't do the trick :( I even tried with jQuery...No luck either. $('.btn.btn-1').css('background-image', color); I see no errors on the console...So not sure what is going on - or what i'm missing... codepen.io/anon/pen/VgRxoK?editors=1010

Bohdan Sviripa · Accepted Answer · 2019-02-20 00:16:06Z

0

I would recommend you to add a modifier class for btn class. Modifier class is a part of BEM methodology and it is a sort of helper class which used to change behavior or appearance of the element. Read more about BEM.

After you added your modifier class just add it to your element when you need it.

This approach is better in terms of code cleanness and maintenance. Let me know if you have any questions.

Quick example:

.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
 /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
}

.btn:hover {
  background-position: right center; 
}

.btn-1 {
 background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.btn-1--extra {
  background-image: linear-gradient(to right, color1 0%, color2 51%, color3 100%);
}

<body>
  <div class="container">
    <a name="button" id="button" class="btn btn-1">Button Text</a>
  </div>
  <script>
    var button = document.getElementById("button");
    button.classList.add("btn-1--extra");
  </script>
</body>

answered Feb 20, 2019 at 0:16

Bohdan Sviripa

4515 silver badges10 bronze badges

1 Comment

GeorgeMMP Over a year ago

Hello Bohdan and thank you for your answer! Uhmm color1,color2 and color 3 are variables themselfs for the coresponding colors, that's why i wanted to have them on the script so i can change them.Them being on the styles i cant dynamicly change them as vars there.

Collectives™ on Stack Overflow

Changing CSS via JS

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related