使用js实现换肤功能

Skin.html

<head>

#main

{

width:800px;

height:600px;

margin:auto;

font-family:"新宋体";

font-size:15px;

}

#top

{

width:800px;

height:30px;

border:1px #666666 solid;

border-bottom:1px #333333 dotted;

}

#bottom

{

width:800px;

height:669px;

border-top:0px;

border:1px #666666 solid;

}

#btRed,#btGreen,#btBlue

{

width:30px;

height:15px;

border:1px #999999 solid;

}

#btRed

{

background-color:#FF0000;

}

#btGreen

{

background-color:#00FF00;

}

#btBlue

{

background-color:#0000FF;

}

span

{

margin-right:2px;

float:right;

}

</style>

function init()

{

/*当第一次加载网页的时候，随机产生一个样式表使用*/

var skinArray=["red","green","blue"];

var index=Math.floor(Math.random()*skinArray.length);

var cssName=skinArray[index];

//document.getElementById("cssStyle").href=cssName+".css";

document.styleSheets[1].href=cssName+".css";

}

function changeSkin(cssName)

{

//document.getElementById("cssStyle").href=cssName+".css";

document.styleSheets[1].href=cssName+".css";

}

</script>

</head>

</div>

</div>

</body>

</html>

Blue.css

#bottom

{

background-color:#0000FF;

}

Green.css

#bottom

{

background-color:#00FF00;

}

本案例的要点为，同时为页面准备多个皮肤(css)，当首次加载页面的时候随机添加一个皮肤，然后当点击对应的皮肤的时候加载对应的样式。同时<link rel="stylesheet" type="text/css" href=""/>中href=""不可缺少。

转载于:https://www.cnblogs.com/helloczh/articles/1590506.html

使用js实现换肤功能相关推荐

使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
在Ajax程序中实现无刷新换肤功能(asp.net2.0)
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术.特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性. 从文章的标题上看是Ajax的无刷新换肤,只是本 ...
[css] 如何实现换肤功能？
[css] 如何实现换肤功能? css 换肤常见方案是通过 less/sass/postcss 等css 预处理器,通过它们自身的变量用法,设置不同变量,生成不同的主题样式,但是这些样式都是会被打包 ...
微信小程序实现换肤功能
参考链接: (1)微信小程序实现换肤功能 https://www.jb51.net/article/136445.htm (2)微信小程序实现换肤功能 https://blog.csdn.net/qq ...
java怎样实现换肤功能_JavaScript实现换肤功能
一,js换肤的基本原理基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 ...
仿造百度换肤功能的实现
换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的 ...
换肤功能原理及自定义组件化UI样式初步尝试
只从UI工作开始向前端工作,我一直计划着开发一套属于自己的UI框架,网站通过拖拽点击,或输入布局代码,后台自动生成一套静态页面,从此前端工作仅需要补充各种排版即可,静态页面通过代码生成. 可能我上面的 ...
Element UI主题换肤功能(基于vue-element-admin框架)
环境信息: 日期:2022-08-05 node版本:v14.15.4 "sass": "1.26.8", "sass-loader": & ...
使用ant-design-vue实现换肤功能
1.安装ant-design-vue npm i ant-design-vue --save 2.在main.js中引入 `import Antd from 'ant-design-vue'``imp ...

使用js实现换肤功能

使用js实现换肤功能相关推荐

最新文章

热门文章