通过JS更改CSS
[英]Changing CSS via JS
问题描述
How can i change the "background-image" on .btn-1 to the variable "color" that i have on the script? 
如何将.btn-1上的“背景图像”更改为脚本中的变量“颜色” ？ I basically want to change the 3color gradient property of the CSS .btn-1 using JS. 我基本上想用JS改变CSS .btn-1的3color渐变属性。
<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>
2 个解决方案
解决方案1
3 已采纳 2019-02-20 00:04:54
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需要是一个字符串，使用document.querySelector选择所需的元素然后使用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>
解决方案2
0 2019-02-20 00:16:06
I would recommend you to add a modifier class for btn class. 我建议你为btn类添加一个修饰符类。 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. Modifier类是BEM方法的一部分，它是一种用于改变元素行为或外观的辅助类。 Read more about BEM . 了解更多关于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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.