使用scss和javascript应用动态颜色和不透明度
我有一个要求，用户可以通过从提供的下拉列表中设置自己的颜色来更改主题。基于此颜色，作为开发人员，我将对以下所有部分应用不同的色调 比如说，如果用户选择了绿色，那么我想对主标题使用绿色，对表格标题使用不透明度为0.6的绿色，对活动/选定表格行使用不透明度为0.5的绿色 我尝试了以下格式，将变量传递给rgba不会影响背景色 CSS使用scss和javascript应用动态颜色和不透明度,javascript,html,css,Javascript,Html,Css,我有一个要求，用户可以通过从提供的下拉列表中设置自己的颜色来更改主题。基于此颜色，作为开发人员，我将对以下所有部分应用不同的色调 比如说，如果用户选择了绿色，那么我想对主标题使用绿色，对表格标题使用不透明度为0.6的绿色，对活动/选定表格行使用不透明度为0.5的绿色 我尝试了以下格式，将变量传递给rgba不会影响背景色 CSS :root { --color: #008000; --alpha: 0.5; } #primary-header{ background-co
:root {
--color: #008000;
--alpha: 0.5;
}
#primary-header{
background-color: rgba(var(--color));
}
#table-header{
background-color: rgba(var(--color), var(--alpha));
}
如果我正确理解您的请求，您可以使用javascript操作css。
以下是更改css变量的颜色和不透明度的方法
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--currentColor: orange;
--op: 0.9;
}
a {
color: var(--currentColor)
opacity: var(--op);
}
div {
width: 100px;
height: 100px;
background-color: var(--currentColor);
opacity: var(--op);
}
</style>
</head>
<body>
<select id="combo" onchange="changeColor()">
<option>orange
</option>
<option>green
</option>
<option>red
</option>
<option>blue
</option>
</select>
<div>
</div>
<select select id="combo2" onchange="changeColor()">
<option>0.9</option>
<option>0.8</option>
<option>0.1</option>
<option>0.5</option>
</select>
<script>
function changeColor()
{
// get the color value from the select control
var color = document.getElementById("combo").value;
// apply css change
document.documentElement.style.setProperty('--currentColor', color);
// get the opacity value from the select control
var color = document.getElementById("combo2").value;
// apply css change
document.documentElement.style.setProperty('--op', color);
}
</script>
</body>
</html>
：根{
--颜色：橙色；
--op:0.9；
}
a{
颜色：var（--currentColor）
不透明度：var（--op）；
}
div{
宽度：100px；
高度：100px；
背景色：var（--currentColor）；
不透明度：var（--op）；
}
橙色
绿色
红色
蓝色
0.9
0.8
0.1
0.5
函数changeColor（）
{
//从选择控件获取颜色值
var color=document.getElementById（“组合”）.value；
//应用css更改
document.documentElement.style.setProperty（'--currentColor'，color）；
//从选择控件获取不透明度值
var color=document.getElementById（“combo2”）.value；
//应用css更改
document.documentElement.style.setProperty（'--op'，颜色）；
}