您现在的位置是：网站首页> 编程资料编程资料

使用HTML CSS实现网页换肤效果（二）前端html换肤功能的实现代码

2021-09-05 853人已围观

简介这篇文章主要介绍了使用HTML CSS实现网页换肤效果（二）的相关资料,需要的朋友可以参考下

废话不多说了，直接给大家贴html代码了，具体代码如下所示：

XML/HTML Code复制内容到剪贴板

<head>
<title>网页换肤title>
<meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8">
<link id="myCss" href="orange.css" rel="stylesheet">
<script language="javascript">
//写入客户端Cookie
function writeCookie(csspath) {
var today = new Date();
var expires = new Date();
expires.setTime(today.getTime() + 1000 * 60 * 60 * 24 * 30); //有效期为30天
var str = "cssPath=" + csspath + ";expires=" + expires.toGMTString()
+ ";";
document.cookie = str;
}
//读取Cookie
function readCookie(cookieName) {
var search = cookieName + "=";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) {
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
}
}
}
function ifCookie() {
if (readCookie("cssPath") == undefined) {
writeCookie("orange.css");
}
document.getElementById("myCss").href = readCookie("cssPath");
}
function change(type) {
if (type == "orange") {
document.getElementById("myCss").href = "orange.css";
writeCookie("orange.css");
}
if (type == "gray") {
document.getElementById("myCss").href = "gray.css";
writeCookie("gray.css");
}
}
script>
head>

通过以上代码就可以简单实现使用HTML CSS实现网页换肤效果，希望本读代码对大家有所帮助。

上一篇：简单介绍CSS设置打印页面的方法及css里media的使用设计适用于打印的CSS样式CSS控制漂亮的网页打印效果示例代码将XHTML CSS页面转换为打印机页面CSS实现强制浏览器分页将XHTML CSS页面转换为打印机页面详解CSS3中@media的实际使用CSS3的media query学习攻略详解CSS3中Media Queries的相关使用CSS media queries CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

下一篇：容易忽略的CSS特性 CSS3网格的三个新特性详解利用CSS3的特性改变文本选中时的颜色less让css具有动态语言的特性45个非常奇妙的CSS3 特性应用示例 CSS 框架BlueTrip特性CSS教程:学习CSS的继承性-CSS教程-网页制作-网页教学网CSS教程:优先级问题的考虑实例-CSS教程-网页制作-网页教学网

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网