一种前端Web项目的线上样式动态替换方法和系统技术方案

本发明专利技术涉及一种前端Web项目的线上样式动态替换方法和系统，方法包括：获取前端Web项目运行时的样式代码数据，从该代码数据中获取所有的link标签和style标签；从获取的link标签和style标签中依次选取标签，判断选取的标签是link标签还是style标签，然后分别调用对应的处理逻辑获取样式数据；根据样式替换需求，对样式数据进行字符串替换，得到新的字符串；创建新的style标签，并将新的字符串赋值给新的link标签中；将赋值后的新的style标签插入前端Web项目对应html文档的head标签中，使新的样式生效，并覆盖原来的样式。与现有技术相比，本发明专利技术具有代码改动风险低、适用于多场景的样式替换、兼容性好等优点。兼容性好等优点。兼容性好等优点。

【技术实现步骤摘要】
一种前端Web项目的线上样式动态替换方法和系统


[0001]本专利技术涉及前端Web项目样式替换
，尤其是涉及一种前端Web项目的线上样式动态替换方法和系统。

技术介绍

[0002]在前端项目开发时，或者在已经上线的Web项目中，当需要改变产品的某些样式时，比如，产品的主色调是蓝色，某一天，我们想换个风格，将主色调改为黄色；再或者，产品的字体大小是12px，想要将12px变成14px等等的场景，站在一般的开发角度，就需要在项目代码中全局搜索做替换，会修改底层代码，可能存在一不小心就替换错了地方，也会加大代码审查的负担；对于同时并行的在开发的需求，也无法保证能够及时替换或者无法提供完整的规范做需求开发的支撑。

技术实现思路

[0003]本专利技术的目的就是为了克服上述现有技术存在更换Web项目产品样式时需要在项目代码中做全局搜索替换，代码错误风险大的缺陷而提供一种前端Web项目的线上样式动态替换方法和系统。
[0004]本专利技术的目的可以通过以下技术方案来实现：
[0005]一种前端Web项目的线上样式动态本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端Web项目的线上样式动态替换方法，其特征在于，包括以下步骤：获取前端Web项目运行时的样式代码数据，从该代码数据中获取所有的link标签和style标签；分别获取所述link标签和style标签的样式数据；根据样式替换需求，对所述样式数据进行字符串替换，得到新的字符串；创建新的style标签，并将所述新的字符串赋值给所述新的link标签中；将赋值后的新的style标签插入所述前端Web项目对应html文档的head标签中，使新的样式生效，并覆盖原来的样式。2.根据权利要求1所述的一种前端Web项目的线上样式动态替换方法，其特征在于，获取所述link标签和style标签的样式数据具体包括：从获取的link标签和style标签中依次选取标签，判断选取的标签是link标签还是style标签，然后分别调用对应的处理逻辑获取样式数据。3.根据权利要求2所述的一种前端Web项目的线上样式动态替换方法，其特征在于，所述处理逻辑包括：对于link标签，通过获取link标签的href属性，然后基于该href属性使用ajax请求获取所述link标签的样式数据；对于style标签，通过DOM的innerHTML API请求获取所述style标签的样式数据。4.根据权利要求1所述的一种前端Web项目的线上样式动态替换方法，其特征在于，通过DOM的document.createElement API操作，动态创建出所述新的style标签。5.根据权利要求1所述的一种前端Web项目的线上样式动态替换方法，其特征在于，通过JavaScript的document.getElementsByTagName('link')功能获取所有的link标签；通过JavaScript的document.getElementsByTagName('style')功能获取所有的style标签。6.根据权利要求1所述的一种前端Web项目的线上样式动态替换方法，其特征在于，所述方法还...

【专利技术属性】
技术研发人员：唐炜，
申请(专利权)人：上海得帆信息技术有限公司，
类型：发明
国别省市：