root css 换肤

2024-10-02

简单的JS+CSS实现网页自定义换肤

1,实现效果 2,实现原理主要原理是利用css变量设置颜色,用js动态修改变量,使颜色变化,兼容性如下: 实现换肤之前先要了解一下伪类选择器 :root ,还有css的 var() 函数和 setProperty() 函数 :root 是一个伪类,表示文档根元素,非IE及IE8及以上浏览器都支持,在 :root 中声明相当于全局属性,只要当前页面引用了 :root 所在的文件,都可以使用css var() 函数来引用: 语法 // 自定义属性的名称,必需以 -- 开头 :root{ --ma

antd在线换肤定制功能

最近react项目,用的antd框架,然后看见他的antdPro例子里面有个定制功能很帅,老大说做,那就做吧,鼓捣了一晚终于实现了. 先看预览效果吧 css换肤入行前端的时候经常看鱼哥(张鑫旭)的博客,记得看过这篇 ,当时很惊叹,原理其实很简单,就是我们最能想到的方式,多个css,然后用JS替换从而达到换肤效果.但是这个有局限性,比如我们用的是antdUI库,我们不可能每个颜色都去搞个css吧.当时现在我们有less,sass,而且原生的css也有变量var了,所以新时代我们有新技术达到这个

css 实现换肤几种方式

说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点一.可供选择的换肤对于只提供几种主题方案,让用户来选择的,一般就简单粗暴的写多套主题一个全局class控制样式切换,直接更改全局class <body class='dark'></body> 使用js去修改 link 的 href <link id='link_theme' href="skin.css" rel="stylesheet" type=

利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

一.背景在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带default gray black bootstrap metro五款皮肤,但是它并不像bootsrap提供了很完整的css框架,不能提供项目需要的所有的css,所以还需要自己编写控件之外的一些css.给系统换肤时,easyui控件都没问题,问题就在于自己编写的这部分css怎么实现换肤,当然,最简单的办法就

【转】Javascript+css 实现网页换肤功能

来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添

.NET Web后台动态加载Css、JS 文件，换肤方案

后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFile = new HtmlGenericControl("link"); _CssFile.ID = "CssFile"; _CssFile.Attributes["rel"] = "stylesheet"; _CssFile.A

基于js的网页换肤（不需要刷新整个页面，只需替换css文件）

1. [代码][JS]代码 <HTML><HEAD><link ID="skin" rel="stylesheet" type="text/css"><TITLE>换肤技术</TITLE><SCRIPT LANGUAGE=javascript><!--function SetCookie(name,value){ var argv=SetCookie.ar

使用 css/less 动态更换主题色（换肤功能）

前言说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点一.看需求是什么一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供选择的主题切换不会很多 2. 另一种是需要自定义色值,或者通过取色板取色,可供选择的范围就很大了二.如何实现 1. 对于可供选择的颜色/主题样式换肤的实现一个全局class控制样式切换切换的时候js控制样式的切换 JS改变href属性值切换样式表,例如: <link id="skinco

换肤系统（oocss方式）

近期想做一个换肤系统,参考过Bootstrap系统,思前想后,内容不难,但就是理不清楚,主要是换肤系统的css如何设计,怎样设计可重用性最好,后期更方便修改和维护,还有一个最头疼的就是怎么给css进行命名,没有一个系统的,清晰的,一目了然的命名恐怕自己做到最后也都忘了.今天看到咱们博客上的一篇文章,受益良多,面向对象CSS(OOCSS),原谅我才疏学浅,2008年就被提出来了,我现在才第一次见这个名词.虽然还有人没听过这个名词,但其实也许自己已经用过这个概念和方式,它不是针对换肤系统被提出的概念

hybird之web动态换肤实现

前言最近在重构个hybird(原生的壳包着Web页面)的UI框架,进行到了做换肤功能的阶段,所以这里是我思考的解决的方法. 预想目前实现换肤的功能无非就两种做法. 1.写几个皮肤文件,然后切换使用这几个文件达到换肤的目的. 不得不说这是最常见的方式,效果也比较明显,但是它有几个缺点. 缺点: 1.如果更改一个皮肤的内容,那其他的皮肤文件也要做相应修改(这挺麻烦,不过可以用less管理css解决,所以也不是什么大问题). 2.它是固定的,在使用的时候皮肤文件已经是写好的了,而当我需要动态设置一

Android中插件开发篇之----应用换肤原理解析

一.前言今天又到周末了,感觉时间过的很快呀.又要写blog了.那么今天就来看看应用的换肤原理解析.在之前的一篇博客中我说道了Android中的插件开发篇的基础:类加载器的相关知识.没看过的同学可以转战: http://blog.csdn.net/jiangwei0910410003/article/details/41384667 二.原理介绍现在市场上有很多应用都有换肤的功能,就是能够提供给用户一些皮肤包,然后下载,替换.而且有些皮肤是要收费的.对于这个功能的话,其实没有什么技术难度的,但

QT自定义精美换肤界面

陆陆续续用QT开发过很多项目,也用QT写过不少私活项目,也写过N个工具,一直梦寐以求能像VC一样可以很方便的有个自定义的界面,QSS的强大让我看到了很好的希望,辗转百度谷歌无数次,一直搜索QT相关的换肤文章,绝大部分的是一些简单的按钮文本样式,要做到整体换肤程度几乎不行,QTCN论坛里的奋斗的孩子写了个模仿360安全卫士系列,让我既惊喜有遗憾,惊喜的是能够用QT实现一个这么完整的360安全卫士界面,确实不错,也支持多种换肤,遗憾的是我下载过的是VC版本的,对于一直执着于用Qt Creator 来

锋利的jQuery-5--网页换肤

网页换肤原理:通过调用不同的样式表文件来实现不同的皮肤,并且将切换好的皮肤计入cookie. 例子:通过点击上边的颜色设置下边显示的背景色. html代码:  <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /> <ul id

js网页换肤

使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>网页换肤<

cookie 换肤

jquery.Cookies.js /** * Cookie plugin * * Copyright (c) 2006 ziqiu.zhang * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * 使用举例: //注: 写入时,subName参数请传递空值或null

基于QT的换肤整体解决方案(QSkinStyle)（提供Linux的XP风格）

基于QT的换肤整体解决方案(QSkinStyle) 对QT这个成功的跨平台GUI库,本身内置了对换肤功能的实现,比如cleanlooks.plastique等跨平台风格:还有一些是和平台相关的风格,比如WindowsXP.WindowsVista风格只能用在windows平台上,底层也会调用uxtheme.dll来实现windows的风格. QT内置的风格(qwindowsstyle.qmotifstyle.qcdestyle等),都是针对不同的风格定义(metric.look and f

Javascript之换肤（未完待续）

这个项目我还没有完全写出来,先记录至此.感觉是方法不对,背景图片的切换方法有Problem.如若有一大神发现了我的文章,还望指导,吾将感激不尽.日后代码还会再钻研再改改. <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>标题</title> <meta name="Keywords&qu

Android 打造自己的个性化应用(一)：应用程序换肤主流方式的分析与概述

Android平台api没有特意为换肤提供一套简便的机制,这可能是外国的软件更注重功能和易用,不流行换肤.系统不提供直接支持,只能自行研究. 换肤,可以认为是动态替换资源(文字.颜色.字体大小.图片.布局文件……).这个使用编程语言来动态设置是可以做到的,例如使用View的setBackgroundResource.setTextSize.setTextColor等函数.但我们不可能在每个activity里对页面里的所有控件都通过调用这些函数来换肤,这样的程序代码难以维护.扩展,也违背了UI和代

javascript 入门之简单换肤效果

大家好,我是小强老师,这里简单入门做一个换肤效果效果如图所示: 这个案例思路分为两部分: 获取元素对象. var pic1 = document.getElementById('pic1'); var pic2 = document.getElementById('pic2'); var pic3 = document.getElementById('pic3'); 分别获取这三个图片,并且放入相应的变量中. 2.操作元素对象. 当我们点击( onclick )第一个小图片的时候(pic1

wp7之换肤原理简单分析

wp7之换肤原理简单分析纠结很久...感觉勉强过得去啦.还望各位大牛指点江山百度找到这篇参考文章http://www.cnblogs.com/sonyye/archive/2012/03/12/2392679.html#2329255 还有这篇:http://www.cnblogs.com/xumingxiang/archive/2012/03/23/2413342.html 进入正文吧 1 UI代码很简单,一个listbox 和一个标题textblock,一个button按钮 <ph

root css 换肤

热门专题