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>
Kamil Naja
6,8767 gold badges38 silver badges54 bronze badges
-
w3schools.com/jsref/prop_style_backgroundimage.aspDhaval Jardosh– Dhaval Jardosh2019年02月20日 00:03:20 +00:00Commented Feb 20, 2019 at 0:03
-
@DhavalJardosh I think he forgot to talk about event on button click ?Arthur– Arthur2019年02月20日 00:04:33 +00:00Commented Feb 20, 2019 at 0:04
2 Answers 2
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
5 Comments
GeorgeMMP
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
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
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
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
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
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
1 Comment
GeorgeMMP
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.
default