js快速更换项目主题色

项目刚开始都有一个主题色，当需求变化，需要更换主题色的时候，我们往往需要修改很多地方的代码才能达到效果，如何快速，批量替换主题色，是我最近思考的一个问题，因为最近多次使用别人封装的组件，但组件主题色和项目主题色又不符合，需更改部分样式。我的做法是：复用之前的样式文件，修改一下对应项目的主题色。用的次数多了，也觉得这种修改主题色的方式不够简洁，快速。于是萌生了封装一个可以快速更换主题色的工具的想法，首先想到的最简单的就是动态插入样式代码，主题色用字符串拼接的方式去修改，这样可以批量替换，初步实现快速更换的效果。下面我们以demo为例，来说明具体的实现步骤。

• DOM结构如下：

<div class="box">
    <div class="title">更换主题色</div>
    <div class="content">
        内容文本背景色<br>
        内容文本背景色<br>
        内容文本背景色<br>
        内容文本背景色<br>
        内容文本背景色<br>
        内容文本背景色<br>
        内容文本背景色<br>
    </div>
</div>

• 样式如下：

.box{
        width: 300px;
        height:500px ;
        position: relative;
        margin: auto;