javascript - 通过使用 jquery 插入变量来修改 CSS

Question

我正在尝试使用 jquery 3 修改类的 css 并更改背景颜色。

首先，我将 rgba 颜色代码 (properties.color) 转换为可以正常工作的十六进制代码。

然后我使用 jquery 更改“zu-default div”类的背景。但是，当我插入变量“finalcolor”时，这不起作用。当我硬编码十六进制颜色时，例如“#fec23b”，更改是可见的。当我使用变量“finalcolor”时，没有任何变化。将变量 finalcolor 打印到控制台表明这是一个完美的十六进制代码。

有什么建议么？

// converts a rgba to hex
 let finalcolor = rgb2hex(properties.color);

    //prints the converted hexadecimal (for eg: #fec23b)
   console.log(finalcolor);

//Should modify the background of the zu-default div class to the color „finalcolor“
$('.zu-default div').css("background", finalcolor);

标签： javascriptjquerycss

Answer 1

$('.zu-default div').css("background", finalcolor+' !important');

或者

$('.zu-default div').css("background", finalcolor.toString());

这是工作？

 $('.zu-default div').css("background", 'green');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zu-default">
            <div style="width: 10px; height: 10px;"></div>
            <div style="width: 10px; height: 10px;"></div>
            <div style="width: 10px; height: 10px;"></div>
        </div>

let finalcolor = '#222222';

$('.zu-default div').attr('style', $('.zu-default div').attr('style')+"background: "+finalcolor+";");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


        <div class="zu-default">
            <div style="width: 10px; height: 10px;"></div>
            <div style="width: 10px; height: 10px;"></div>
            <div style="width: 10px; height: 10px;"></div>
        </div>