前端实现换肤功能

最新推荐文章于 2024-04-11 02:20:46 发布

麻烦让一让，我比较宽

最新推荐文章于 2024-04-11 02:20:46 发布

阅读量7.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css3 换肤前端 H5

本文链接：https://blog.youkuaiyun.com/snailmar/article/details/95662926

项目需要根据企业用户展示不同颜色，由于现有架构限制，前端采用纯CSS实现换肤。方案一为加载不同CSS文件，简单但重复代码多；方案二、三通过CSS变量动态设置主题色，减少代码重复，支持任意肤色切换，只需与后台约定theme规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目背景: 由于项目要求,需要前端对不同的企业用户展示不一样的颜色,也就是简单的更改肤色.本来使用前端框架会很容易解决,但是公司目前的架构不是很好,前后端分离也没有那么彻底,web工程还是搭配jsp,没办法,只好用最纯粹的css来实现换肤要求了.

方案一

最开始没怎么想,决定使用最简单的方法,根据不同的颜色方案加载不同的css

    <link rel="stylesheet" href="" id="customerTheme">
    <script>
    //根据不同的企业用户加载不同的css
 	document.querySelector

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

麻烦让一让，我比较宽

关注关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端（Vue）动态换肤的通用解决方案及原理分析（1）

xiao廸要飞

08-16

1361

本文讲解了在 Vue.js 项目中实现动态换肤的原理和方法。核心思想是使用 SCSS 变量定义颜色，通过修改这些变量的值来动态改变应用的主题色。为实现换肤功能，需要避免将色值硬编码，并通过 ThemeSelect 组件切换主题色。文章还介绍了如何处理第三方组件库（如 Element Plus）的主题色，以及自定义组件的主题色。使用 v-bind="$attrs" 简化了属性传递操作。为了保持用户的主题选择，文章通过 Vuex 和 LocalStorage 实现了主题色的本地缓存，使页面刷新后主题色不会丢失。

【前端学习笔记】网站换肤功能

你好呀，欢迎你的到来。

04-08

1052

内容参考自: https://www.zhangxinxu.com/wordpress/2019/02/link-rel-alternate-website-skin/ https://egoist.moe/2015/12/13/how-does-array-slice-call-arguments-work/ 小陈一谷歌，发现确实如参考文章中所说，大部分实现换肤功能有两种方法：全局class...

2 条评论您还未登录，请先登录后发表或查看评论

网页前端网页换肤（js）

bruscar的专栏

07-18

2173

网页换肤原理：需要准备不同的肤色的ｃｓｓ的样式表，涉及到：点击事件（onclick） id属性，所有的都可以有id属性。所以：要求准备： 1、需要哪些样式，点击之后会改变href 2、需要的属性添加事件，切换js fucntion 是函数的关键字 ·js中的函数赋值：可以匿名函数和之间赋值函数window.onload() 这个是加载网页的方法，我们是可以通过写这个方法，才会

前端一键换肤换肤简单探索

weixin_49210760的博客

04-05

746

效果图默认蓝白方法一。如果要控制的范围不多很小的话使用控制类名的切换 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</titl

前端 “一键换肤“ 的 N 种方案

我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。

02-17

1368

前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群前言现在越来越多的网站都提供了拥有换肤（切换主题）功能，如 ElementUI[2]，既是为了迎合用户需求，或是为了凸显自己特...

Vue(8)，2024年最新前端动态换肤实现原理解析

最新发布

2301_76190672的博客

04-11

1004

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化一个人可以走的很快，但一群人才能走的更远。

react实现换肤功能的示例代码

10-18

在React应用中实现换肤功能是一项常见的需求，它允许用户根据个人喜好选择不同的主题颜色，提升用户体验。本文将详细介绍如何在React中实现这一功能，并提供一个具体的示例代码。一、目标目标是为用户提供几种...

JS实现换肤功能的方法实例详解

10-17

在JavaScript中实现换肤功能主要是通过动态修改页面元素的CSS样式来完成的。这种功能在网页应用中很常见，可以提供用户自定义界面颜色的选择，提升用户体验。下面我们将详细讲解如何使用JS实现换肤功能，并通过实例...

vue+iview+less 实现换肤功能

10-18

7. **实现换肤功能**：在Vue组件中，我们可以使用`<Dropdown>`组件来提供一个下拉菜单，让用户选择主题。例如，在一个`.vue`文件中： ```html (0)">下拉菜单 <Icon type="arrow-down-b"></Icon> (1)">摇滚...

前端一键换肤的几种方案

高先生的猫

04-11

792

现在越来越多的网站都提供了拥有换肤（切换主题）功能，如 ElementUI，既是为了迎合用户需求，或是为了凸显自己特点，因此提供了个性化定制的功能. 其实之前就想了解和实现 “一键换肤” 功能，但是由于种种原因一直拖到了现在. css样式覆盖实现核心通过切换 css 选择器的方式实现主题样式的切换. 在组件中保留不变的样式，将需要变化的样式进行抽离提供多种样式，给不同的主题定义一个对应的 CSS 选择器根据不同主题设置不同的样式实现下面通过 vuex 存储和控制全局的主题色

html,vue,scss,js前端两种方式实现一键换肤效果

m0_66962220的博客

03-01

983

08-11

08-05

NULL 博文链接：https://csblot203.iteye.com/blog/2065926

Vue 动态换肤

weixin_45820444的博客

10-10

1801

规划几套样式，通过动态class 或 scss 混入 @include 等方式进行赋值，给最外层的父元素添加全局样式。涉及到跨页面操作，可以将class转化为JSON字符串存在storage 或vuex 里，或者封装进公用组件，把每个页面不同的内容以插槽的形式插入。其它应用场景如：天地图自定义覆盖物，轮播图自定义指示点。

前端换肤的N种方案，请收下

azl397985856的专栏

08-26

853

作者：令夕原文链接：https://juejin.im/post/5e92ad7a518825736c5b91cd最近在做网站换肤的需求，也就是主题切换。那么如何切换主题的颜色呢？以下是...

小程序：基于wepy的小程序换肤功能

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

11-02

362

主要代码在三个文件中 1、该文件重要配置主题色 // config/theme.js // 睿肤识别（skin）主题 // 慧捷肌肤（dermoscopy）主题 const themeData = { skinStyle: ` --themeColor: #fff; --themeBgColor: blue; `, dermoscopyStyle: ` --themeColor: #fff; --themeBgColor: red; `, } export default

换肤实现思路(二)

iteye_778的博客

07-09

145

以前写过一个关于皮肤的换肤思路的博客。但那个里边主要是针对于资源换肤，没有布局换肤的概念。今天实现了一个可以更换布局的换肤实现。思路还是上篇文章的思路，只是做了一个简单的实现。代码如下： package com.test.android.skin.main; import android.app.Activity; import android.content.Con...

前端 “一键换肤“ 的几种方案

sq66666的博客

03-02

285

转载自前端 “一键换肤“ 的几种方案

两种最简单的方式教会你如何实现前端一件换肤！

qq_44647871的博客

03-26

2360

今天我教大家用两种最简单的方式实现前端一键换肤的功能，都是给予原生 css 和 js 的方法属性，不用安装任何的第三方库。听我娓娓道来

前端技能：用JS和CSS实现网页换肤功能

### 知识点二：前端实现换肤功能的技术要点前端实现换肤功能主要包括以下几个方面： 1. **定义CSS主题**：首先需要定义不同的CSS主题文件，每个主题文件包含一套完整的样式规则，包括颜色、字体、边距、背景等。 ...