用css实现网站换肤

稿源：互联网 2022-05-12 15:49:57 点击： 4849 撤稿纠错

用css实现网站换肤效果，许多网站都会让用户自己选择风格，用的就是这个特效。

以下讨论的是和css 特效相关的用css实现网站换肤教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style id="red" disabled="ture"> body { background-color:#f00; } </style> <style id="blue" disabled="ture"> body { background-color:#3399FF; } </style> <style id="default"> body { background-color:#fff; } </style> <style type="text/css"> body { font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; margin:0; } </style> </head> <body> <script> function switchSkin(skin){ var style = document.getElementById(skin); var tmp = document.getElementsByTagName('style'); var skinArr = []; for(var i = 0; i < tmp.length; i++){ if(tmp[i].getAttribute('id')){ skinArr[i] = tmp[i].getAttribute('id'); document.getElementById(skinArr[i]).disabled = true; } } style.disabled = false; } </script> <input type="button" onclick="switchSkin('red');" value="red" /> <input type="button" onclick="switchSkin('blue');" value="blue" /> position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; position:fixed; </body> </html> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于用css实现网站换肤的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200812162417.shtml方便下次再访问哦。

·上一篇： 超简单表格隔行换色鼠标经过变色效果
·下一篇： 选项卡做法

用css实现网站换肤

文章分类LIST >>返回首页

最新游戏

最新新闻