rel= alternate 换肤

2024-08-24

利用link标签rel="alternate stylesheet"属性实现界面动态换肤

rel="stylesheet"属性指定将一个样式表立即应用到文档.rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它通过js拿到link标签对象,disabled属性设置,可以实现变化页面导入样式表disabled = true;表示它不会立即生效disabled = false;表示立即生效简洁明了:提供一下:自己做的一个小例子:http://files.cnblogs.com/files/ChineseMoonG

link rel=alternate网站换肤功能

此方法借助HTML rel属性的alternate属性值实现. <link href="reset.css" rel="stylesheet" type="text/css"> <link href="default.css" rel="stylesheet" type="text/css" title="默认"> <link href=

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

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

锋利的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

【转】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

cookie记忆换肤功能实战Demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery换肤+cookie记忆功能</title> <link rel="stylesheet" href="../css/style.css" media="screen"

用js来实现页面的换肤功能(带cookie记忆)

用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的DIV元素有一个基本的框架结构. 2.再定义一系列的样式color1.css,color2.css……用来确定DIV元素的背景颜色,边框颜色等等. 3.用JS函数来决定调用哪个样式,并把调进来的样式写进cookie,这样就可以达功能. 例如:我们的页面结构如下: <div id="header&

js实现换肤效果

一,js换肤的基本原理基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co

网页换肤,模块换肤,jQuery的Cookie插件使用（转）

具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置具体的实现代码如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" />

antd在线换肤定制功能

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

JavaScript网页换肤

使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head> <link id="css1" href="5-1.css" type="text/css" rel="stylesheet"> <script> function ys1(){ var a=do

JavaScript小练习2-网页换肤

题目分析三个皮肤切换按钮的选择用li即可. 点击显示白点 li中嵌套一个li,onclick时改变子元素li的css onload 当页面加载完成后立即执行一段JavaScript代码. onload 属性在对象已加载时触发. onload 常用在"body"中,一旦完全加载所有内容(包括图像.脚本文件.CSS 文件等),就执行一段脚本. 在 HTML 中: <body onload="SomeJavaScriptCode"> 在 JavaScri

jquery.cookie中的操作之与换肤

jquery.cookie.js的插件,插件的源代码如下: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ /** *

angular2中一种换肤实现方案

思路:整体思路是准备多套不同主题的css样式.在anguar项目启动时,首先加载的index.html中先引入一套默认的样式.当我们页面有动作时再切换css. 可以通过url传参触发,也可以通过button触发.下面演示的是url传参切换.button同理,只要调用有同的方法触发就行. 首先,index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8

基于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

5.2 《锋利的jQuery》jQuery对表格的操作（选项卡/换肤）

表格隔行变色以及单选/复选表格展开关闭表格筛选字体变大/缩小选项卡网页换肤 tip1: $("tr:odd")和$("tr:even")选择器索引是从0开始的,因此第1行是偶数 1.表格隔行变色以及单选/复选 .even{background-color: #fff38f;} /*偶数行样式*/ .odd{ background-color: #dcdcdc;} /*奇数行样式*/ .selected{ background-color:#ff4136;

换肤功能的实现以及监听storage实现多个标签页一起换肤

1:需求:项目的侧边栏实现换肤功能,核心代码: updateSkin (val) { const existSkinLink = document.head.querySelector('link[id="sidebar"]') if (existSkinLink) { existSkinLink.setAttribute('href', `//static.zhaopin.com/newcrm/static/skin/${val}02.css`) } else { const ski

rel= alternate 换肤

热门专题