前端实现换肤功能

最新推荐文章于 2024-08-16 23:27:45 发布

麻烦让一让，我比较宽

最新推荐文章于 2024-08-16 23:27:45 发布

阅读量7.6k

点赞数 1

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

本文链接：https://blog.csdn.net/snailmar/article/details/95662926

版权

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

摘要由CSDN通过智能技术生成

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

方案一

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

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

麻烦让一让，我比较宽

关注关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

你好呀，欢迎你的到来。

04-08

1003

内容参考自: 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...

网页前端网页换肤（js）

bruscar的专栏

07-18

2128

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

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

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

最新发布

xiao廸要飞

08-16

960

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

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

weixin_49210760的博客

04-05

710

效果图默认蓝白方法一。如果要控制的范围不多很小的话使用控制类名的切换 <!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

1295

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

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

2301_76190672的博客

04-11

975

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

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

m0_66962220的博客

03-01

792

vue3+ts实现一键换肤效果

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

10-17

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

vue+iview+less 实现换肤功能

10-18

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

Javascript结合css实现网页换肤功能

10-29

CSS部分是实现换肤功能的核心，不同的CSS文件包含了网站在不同皮肤下的样式定义。例如： - `css/main0.css` 包含默认皮肤的样式定义。 - `css/main1.css` 包含绿色皮肤的样式定义。当通过JavaScript更改`<link>`...

AntDesign最简单的动态换肤方案

08-11

AntDesign最简单的动态换肤方案

后台管理界面web换肤及easyui实例

08-05

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

兼容PC端的H5播放器，代码已经精简，播放器可换肤

08-01

此代码已经精简，可以直接调用，PC段兼容IE各版本，播放器可自定义皮肤。

Vue 动态换肤

weixin_45820444的博客

10-10

1683

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

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

azl397985856的专栏

08-26

825

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

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

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

11-02

316

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

换肤实现思路(二)

iteye_778的博客

07-09

114

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

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

sq66666的博客

03-02

237

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

网站换肤功能实现小工具 - CSS换肤小demo

该资源是一个小型的演示项目，旨在展示如何为网站实现换肤功能。该功能允许用户根据自己的喜好更改网站的主题样式，而这一选择能够被保存并在用户下次访问时生效，从而提升用户体验。以下是该资源中涉及的关键知识点...